List of Bootstrap 3 CSS classes with description

List of Bootstrap 3 CSS classes with description

Every web developer should know how to properly code a responsive website. Bootstrap 3 is an ultimate framework that learns you how to think when coding responsive websites and makes their creation much easier and faster. When I was learning Bootstrap 3, I was looking for a simple list of basic Bootstrap 3 classes with description and there were none - only a few lists for Bootstrap 2, without any description, therefore pretty useless for my intentions. So I created this list of Bootstrap 3 CSS classes with so much desired description - I hope it's comprehensive. Keep in mind that it's not a documentation, it's just a quick hint to help you understand the meaning of each mentioned class.

It is also not a complete list of classes, it would take days to create it and you don't really need to use (and know) all the BS3 classes. See the sources part in the bottom of this page to find out the meaning of the classes that I don't mention here (button classes for example).

Basic Bootstrap Classes


  • sets fixed width to an element (which changes depending on a screen size to other fixed values, so it's still responsive) on all screen sizes except xs - on xs, the width is calculated automatically (this behaviour can be changed)
  • a fixed width responsive website should be wrapped in .container (or just the content without menu, whatever - it's up to you)
  • .container can't be nested!


  • sets 100% width, margin-left and margin-right: auto, padding-left and padding-right: 15px
  • a full screen website should be wrapped in .container-fluid
  • .container-fluid can't be nested!


  • creates horizontal groups of columns (which usually have width classes, see below)
  • must be within .container to ensure correct padding and alignment
  • only columns (block elements with width classes) may be immediate children of rows
  • sets margin-left and margin-right: -15px



  • sets float to either left or right


  • sets margin-left and margin-right to auto

Bootstrap Grid Classes

  • can be nested, the nested columns must be wrapped in .row as well
  • all columns have float: left and position: relative styles













  • sets width of a column (specified in %) on extra small screens (<768pxt)













  • sets width of a column (specified in %) on small screens (≥768px)













  • sets width of a column (specified in %) on medium size screens (≥992px)













  • sets width of a column (specified in %) on large screens (≥1200px)

.col-xs-offset-* (.col-xs-offset-1, .col-xs-offset-2, .col-xs-offset-3 ... up to -12)

.col-sm-offset-* (.col-sm-offset-1, .col-sm-offset-2, .col-sm-offset-3 ... up to -12)

.col-md-offset-* (.col-md-offset-1, .col-md-offset-2, .col-md-offset-3 ... up to -12)

.col-lg-offset-* (.col-lg-offset-1, .col-lg-offset-2, .col-lg-offset-3 ... up to -12)

  • sets offset (margin-left) by specified number of columns (eg. set .col-sm-offset-3 class to a column to move it by three columns on small screens)

.col-xs-pull-* (.col-xs-pull-1, .col-xs-pull-2 ... up to -12)

.col-sm-pull-* (.col-sm-pull-1, .col-sm-pull-2 ... up to -12)

.col-md-pull-* (.col-md-pull-1, .col-md-pull-2 ... up to -12)

.col-lg-pull-* (.col-lg-pull-1, .col-lg-pull-2 ... up to -12)

  • sets left position in % as it is with columns (e.g. left: 75% with -pull-9)

.col-xs-push-* (.col-xs-push-1, .col-xs-push-2 ... up to -12)

.col-sm-push-* (.col-sm-push-1, .col-sm-push-2 ... up to -12)

.col-md-push-* (.col-md-push-1, .col-md-push-2 ... up to -12)

.col-lg-push-* (.col-lg-push-1, .col-lg-push-2 ... up to -12)

  • sets right position in % as it is with columns (e.g. right: 25% with -push-3)

Bootstrap Visibility Classes

  • you can apply all as many of these classes on a single element as you wish and this mixing gives you even more possibilities for your layout


  • obvious, clear: both
  • often combined with classes below

.visible-xs-block and .visible-xs

.visible-sm-block and .visible-sm

.visible-md-block and .visible-md

.visible-lg-block and .visible-lg

  • displays element (sets display: block property) only on screens with specified size and hides it (sets display: none) on screens of other sizes automatically
  • often combined with .clearfix so that clearfix is effective only on the selected screen size






  • displays element (sets display: inline-block property) only on screens with specified size and hides it (sets display: none) on screens of other sizes automatically





  • displays element (sets display: block property) only on screens with specified size and hides it (sets display: none) on screens of other sizes automatically





  • hides element (sets display: none property) only on screens with specified size and hides it (sets display: none) on screens of other sizes automatically


  • displays element (sets display: block) in print (pre)view


  • displays element (sets display: inline) in print (pre)view


  • displays element (sets display: inline-block) in print (pre)view


  • hides element (sets display: none) in print (pre)view

Bootstrap Typography Classes

  • default font-size of <body> a <p> elements is 14px, line-height 1.428; <p> also has margin-bottom of half of its line-height (20px with 14px font), therefore 10px by default
  • all elements like b, big, code, em, i, mark, small, strong, sub, sup, ins, del, s, u, abbr, address and blockquote (and small and cite inside) are properly styled
  • vast majority of these classes are most often set to either paragraph, strong or em elements


  • class for a wrapping div of a heading
  • adds some margin, padding and border-bottom







  • makes an element look like heading of a chosen level


  • for highlighting an element
  • sets element's font-size to 21px, font-weight: 300, line-height: 1.4 and margin-bottom: 20px





  • aligns texts, usually paragraphs, with text-align CSS property


  • keeps the whole text with this class on a single line, no wrapping occurs because of white-space: nowrap CSS property of this class




  • sets text-transform CSS property to make all characters inside the element with this class lowercase, uppercase or capitalized


  • makes text grey


  • makes text blue


  • makes text green


  • makes text dark blue


  • makes text dark yellow


  • makes text red

Bootstrap Lists' Classes


  • removes list-style and margin-left on list items
  • doesn't apply for nested lists (if needed, the nested list has to have .list-unstyled class as well)


  • places list items on a single line (with display: inline-block and padding)


  • class for a definition list (<dl>)
  • sets nice styles for <dt> and <dd> within the definition list (text align, font-weight)


  • class for the parent element (usually <ul>, but can be <div> as well) of list items
  • list items have to have .list-group-item class


  • class for .list-group children elements
  • for a nicer look of the list items
  • usually on <li>, but can be <a> as well


  • for a heading within .list-group-item, often <h4> or similar low-level heading


  • for text within .list-group-item, often in the paragraph tag or just in a span

Bootstrap Tables' Classes


  • for an ordinary table
  • table heading has only border-bottom and <td>s have only border-top


  • every odd line will be darker for a nicer look (using :nth-child selector)
  • table heading <th> has only border-bottom and <td>s have only border-top
  • should be combined with .table class


  • table with borders all around
  • should be combined with .table class


  • class for a table
  • adds hover/focus effect on the table's tbody rows
  • should be combined with .table class


  • should be combined with .table class
  • for an ordinary table with half cell padding, so rows are not that high


  • class for a wrapper (! mostly div) of a table to keep it responsive in the way that scrollbar appears on extra small devices






  • classes for either <tr> or just <td>
  • sets background color for all <td> in a table row (or just one <td>) to grey (active) / green (success) / blue (info) / yellow (warning) / red (danger)

Bootstrap Forms' Classes

  • don't forget that even form elements can be in the Bootstrap grid, so don't be afraid to use .row inside a form and then col-*-* wrappers


  • when creating vertical forms, it's a class for its wrapper (mostly div) of each label and its input, adds some margin-bottom


  • for every form element (input, textarea...), gives it 100% width
  • to make it narrower, use a narrower wrapper (row and col-*-* divs)


  • for a paragraph that replaces a form element (input...)


  • for horizontal forms where label is on the same line as input
  • you have to use column classes (like col-xs-10) for each label and its input (or whateveer it is)
  • still combined with .form-group wrapper and .form-control classes


  • for a single line form (but still vertical on extra small screens)
  • often used with the placeholder attribute to not need labels
  • labels of inline forms should get .sr-only class to be positioned so that they can't be seen (but they won't get display: none or visibility: hidden property)



  • makes a form element like input or select either bigger or smaller than default



  • classes for .input-group (see further)
  • always used together with .input-group class


  • class for a wrapper of .input-group-addon or .input-group-btn
  • used instead of form-group when the classes above are used


  • class for a span that serves as a wrapper for either .glyphicon or a radio/checkbox input
  • adds your choice (glyphicon...) on the inner edge of an input field with grey background
  • the span with this class can be either before or after input, depends where you want the icon to show (the left or right side of the input)
  • must be within .input-group


  • class for a span that serves as a wrapper for a button that looks like it was within a form input
  • the span with this class can be either before or after input, depends where you want the button to show (left or right side of the input)
  • contains <button> (the button can also include .dropdown-toggle class, span with .caret class and data-toggle="dropdown" attribute for even more complicated buttons)
  • must be within .input-group


  • class for an empty span that creates a dropdown arrow


  • class for a span that serves as a help text for users
  • has to be placed right after an input of a form




  • classes for wrapping divs with .form-group class
  • colours the label, input and .help-block span inside to green/yellow/red
  • the label within the wrapper with one of these classes has to have .control-label class to be coloured as well


  • class for the wrapping divs with .form-group class when you also use glyphicon for the input within the wrapper

To disable input, use disabled="disabled" or readonly="readonly",
To disable whole fieldset, wrap form-groups to fieldset with disabled="disabled"

Bootstrap Image Classes

  • images should have .img-responsive or .thumbnail to be responsive and be wrapped in a column wrapper (like col-xs-3...)


  • img class that provides little border-radius


  • img class that provides 50% border-radius making the img circle shaped


  • img class that provides a 1px solid grey border, 4px padding, white background, display: inline-block property and fast CSS3 transition


  • class for a wrapping div (or <a> in case of gallery) of an image, adds some styles (border, padding, background, transition) and set's the image max-width: 100%, height: auto; display: block; and margin-left and margin-right: auto


  • img class that makes any image responsive (scaling to the parent element) as it has max-width: 100% and height: auto
  • may not work if placed in a floating element!


  • class for a div inside .thumbnail element (a or div) that may include h3, p, a (also buttons) for a proper margin/padding


  • class for a div (or li, whatever) that may contain an image, a heading, some <small> text and paragraphs
  • ensures proper image margin/padding
  • heading inside should also have media-heading attribute and should be (together with paragraphs) wrapped in a .media-body wrapper
  • any image within should have .pull-left or .pull-right class to float


  • class for a list (ul, ol) that contains .media inside
  • ensures better margin/padding


  • base class for glyphicons (font-based icons), sets font, its styles and positioning
  • should be used on a span

.glyphicon-* (replace the star with any name of a glyphicon from this list)

  • sets picture via font and :before CSS3 selector with content of the font
  • must be used together with .glyphicon class to show proper image
  • should be used on a span

Bootstrap Embed Classes


  • general class for responsive embedding wrapper



  • specific class for the embed wrapper with ratio already set
  • used together with .embed-responsive class


  • used on the iframe or whatever it is inside the wrapper

Bootstrap Navigation Classes


  • the basic class for every navigation structure (<ul>), removes any list-style, left padding and bottom margin
  • also sets display: block and position relative for its <li> children
  • must be set on every navigation


  • class for a list item (nav item, li) that makes it look active / current


  • class for navigation structure that gives it a tab style (proper borders + float: left)


  • class for navigation structure that gives it a pills style (background on active nav item)


  • makes vertical pills navigation
  • used together with .nav-pills (and .nav of course)


  • class for an
  • nav item to make it dropdown
  • needs additional classes elsewhere to work (see below)


  • class for an <a> which is within <li class="dropdown"> to make a dropdown menu
  • needs additional classes elsewhere to work (see below)


  • class for an <ul> which is within <a class="dropdown-toggle"> to make a dropdown menu
  • provides proper displaying and hiding
  • the most important dropdown menu class
  • needs .dropdown and .dropdown-toggle classes on parent elements (see above)


  • class for an <ul>, together with .nav-tabs or .nav-pills creates a navigation with centered text and links' parent elements of the same width


  • class for <li> in a navigation
  • disables the link inside VISUALLY and also adds a special mouse cursor, but the link remains active - you need to remove the href attribute of the <a> to completely disable the link

Bootstrap Navbar Classes

  • the difference between nav and navbar classes is the fact that navbar can collapse the whole nav (the nav can't do it on its own)


  • basic class for a navigation wrapper (usually <nav>), sets border, bottom margin, min-height and position: relative
  • if it's not supposed to be fixed, can be placed anywhere in .container or .container-fluid


  • sets other basic styles for a navigation wrapper (background gradient and box-shadow) and also its items (including .active class on <li>s)
  • for dark colours, see .navbar-inverse below


  • variation of navbar-default but with dark colours
  • never use navbar-default and navbar-inverse on one element as it doesn't make any sense


  • sets styles for special hyperlinks and other "simple text" in a menu (float: left, bigger font size, some padding, text-shadow...)



  • additional class to .navbar that makes the navigation fixed at the top (or bottom) of the page as you scroll
  • used together with .navbar and also .navbar default (just to keep the nice look)
  • you should add some top or bottom padding to your <body> to not let the navbar overflow your content


  • removes top, right and left border and also border-radius of your navigation


  • class for <ul> that serves as breadcrumbs
  • gives breadcrumbs a cool look


  • class for <ul> that serves as pagination
  • properly styles <li> within this pagination also with .disabled and .active classes (keep in mind that .disabled doesn't remove link's functionality)



  • used on <ul> together with .pagination, makes pagination either bigger or smaller than default


  • used on <ul>, styles "Previous" and "Next" links to look better with a grey border
  • its list items can have .previous, .next and also disabled classes for even better styling



  • used on <li> within <ul class="pager">, adds arrows to the links

Other sources

When I was studying Bootstrap 3, I used three pretty nice sources that are definitely worth mentioning.

  • Tutorial Republic's Twitter Bootstrap Tutorial - this might be the easiest way to learn Bootstrap 3. Offers the "Try this code" feature to play with the classes at each chapter to see how all classes behave. I went through the basic part and it's really great. There are few little flaws but nothing really serious (except missing .img-responsive class), I'd definitely recommend you this tutorial
  • Bootstrap 3 CSS-part documentation - probably the first source that you came across, the official BS3 documentation. If you learn fast and easily, this might be all you need to learn the basics of Bootstrap 3.
  • Bootstrap 3 Components-part documentation - the documentation for Bootstrap 3 Components which are an optional part of Bootstrap 3. Plenty of them are kinda important - navigation, buttons, also very useful but not necessary for your Bootstrap powered responsive website

<< Back to the previous page

1 2
Ron Shack

The classes with de scrptions are very handy.

Published on 12.09.2017 20:45:39, from Liberal USA

Jako niegdys stanowil epizod co brac na mase miesniowa ? Co papla specjalisty ? Ja zamierzam, iz oraz wlasnie musisz grabie opierac natomiast potrzebujesz sporzadzac subtelniejsze cwiczenia. Np pompki na kolanach, unoszenia z gumami albo australijskie.

Aklimatyzacja w zajeciach obligatoryjna obcowan naczelna, aby regenerowac ostatnie pomysly, chociaz poprzez jaskrawy ciag. Zakosztuj pózniej do kwadry agresje oraz odtwarzaj taki zestaw.

Wielokrotnie jakkolwiek zadanie odzywcze obok ektomorfików istnieje oczywiscie koturnowe, iz doreczenie zdrowej miary elektrycznosci przy jalmuzn cukrów wystepuje sie niespelna iluzoryczne. Z ostoja naplywaja dzicze, które odzywki na rzezbe uwazaja równiez dwa ciosy wyrazniejsza kalorycznosc nizeli na mase nastepne dwa makroskladniki zywnosciowe. Znamionuje aktualne, ze do obiadów warto zakladac oliwe sposród oliwek, fresk lniany, orzechy, awokado, maslo zóltobrazowe jednakowoz plecione siemie lniane. Tedy niemniej kondycja egzystuje homologiczna jakze w bezladu cukrów zmontowanych - nie droga zaserwowac precyzyjna cena numeryczna. Z solidnoscia jednakowoz wladcza przemówic, iz zbieranin powinien wylowic sie w kazdorazowym pokarmu, zbytnio akapitem obecnego potreningowego, opierajacego na cukrach oczywistych.

Published on 19.10.2017 01:56:17, from Nis

That was great,thanks

Published on 15.10.2016 22:23:40

Muhammad iqbal

Thanks very very helpfull information

Published on 04.10.2016 11:48:06, from pakistan

Chhanda Auddy


Published on 05.08.2016 17:49:12, from Centre Kolkata

mukesh patel

great job....................................................................

Published on 29.07.2016 16:21:55, from india


thank you so much !!! Is is helping me a lot !!

Published on 19.07.2016 13:57:58, from bahawalpur

shravan ravva

thank you!!!!!!!!!!

Published on 21.06.2016 14:40:35, from surat


Hoping to see examples for us (beginners). Thank you so much.. Anyway, i really like your website.

Published on 12.06.2016 20:47:01, from San Mateo Rizal


nice work sir please sir all class provaid vedio

Published on 02.06.2016 17:49:07, from jaipur rajasthan india

Hmmi think it's good ides, Good thoughts, you can do it..

Published on 10.06.2016 14:34:09, from Surat

very usefull

Published on 25.05.2016 06:30:51, from bangalore

Hasnain Ali

very nice work...

Published on 16.05.2016 06:29:16, from Pakistan


Thank you so much! You are a big help!
Wish you all the best!

Published on 07.04.2016 06:33:49, from Cambodia

Lakshme Gowda

It is worth and awesome

Thank you Tomáš Janeček

Published on 17.03.2016 14:29:36, from Banglore,India


I am not a web developer, but had to re-build my site in Dreamweaver CC.
This list explains a lot.

Published on 17.03.2016 09:45:19, from UK

Nimisha Mangukia

Thanks, It help me lot

Published on 09.03.2016 07:01:43, from Ahmedabad

Ambuj Khanna

very useful and thanks for sharing but up to date knowledge i can find at

Published on 07.03.2016 08:32:38, from India


added live example for very helpfull material

for all visitor

Published on 25.02.2016 05:54:55, from surendranagar

MD. Faiz Warsi

This articles is very helpful for HTML Developer.

-Tahnks a lot

Published on 24.02.2016 08:44:30, from New Delhi

if in this article added with example this very help full for each n every person

Published on 25.02.2016 05:52:30, from surendranagar

This is really awesome and very helpfull for me. Thanks a lot.

Published on 15.02.2016 18:17:15, from Dhaka, Bangladesh


I just wanted to add an additional source of reference I created to help sort the classes alphabetically and by parent category.

Published on 08.02.2016 11:14:21, from Michigan


Awesome, this is great

Published on 27.01.2016 12:43:56, from India


Thank you soo much for your work.this will be more useful to me.

Published on 07.01.2016 11:23:54, from andhra pradesh


Thank you!!

Just started learning web dev about a month ago. I have a solid base of HTML/CSS and now have moved onto Bootstrap. I definitely don't like the idea of just copying and pasting -- I like to know how Bootstrap works. This list is perfect. :)

Published on 09.12.2015 18:39:30


Thanks Tomas!! I'm just learning Bootstrap and this is very helpful!


Published on 06.12.2015 14:31:11, from Toronto, Canada

hari prasad

Thank you so much jay

Published on 25.11.2015 11:30:18, from bangalore


Speechless Bro...Thank u Soo Muchhh....

Published on 24.11.2015 06:40:33, from India, Pune

Rafik Romy

Hiii thanks a lot is very useful..keep it up..

Published on 20.11.2015 12:54:07, from Chennai


we are trying to do, may be successes

Published on 05.11.2015 19:34:57, from Dhaka, Bangladesh.

manoj g

thanks for awesome article

Published on 05.10.2015 13:12:16, from india


Thanks dude. For your valuable information [adios]

Published on 03.09.2015 07:28:13, from india

Boyka fan

Help me a lot.....

Published on 31.08.2015 20:28:38, from india


very nice tutorial....thanks bro....

Published on 29.08.2015 08:32:16, from chennai


Wow good job

Published on 29.07.2015 07:56:45, from Chennai


thanks mate...nice work

Published on 27.07.2015 07:35:56, from hyderabad

herb bresnan

This cleared up parts of the Bootstrap documentation I wasn't quite understanding. Thank you for taking the time to create this site.

Published on 18.07.2015 01:06:22, from USA
Tomáš Janeček

That's great when my intentions are fulfilled. Thanks!

Published on 18.07.2015 15:34:08, from Řehoty, Czech Republic

thank you soo much for your work.this will be more helpful to me.

Published on 07.01.2016 11:20:14, from andhra pradesh

Wow....Awesome,man. Awesome....Thanks a lot for this list....

Published on 14.07.2015 05:48:32


Nice Frameworks! Excellent

Published on 25.06.2015 08:34:10, from Chennai


Thanks jane

Published on 24.06.2015 15:12:57, from India


Very helpful informations. Thanks Tomáš Janeček... :)

Published on 23.06.2015 08:13:15, from India

yes binil u are correct

Published on 23.06.2015 08:38:41

Thanks Tomáš, it is very useful for me..@ really u r did a Good Job

Published on 18.06.2015 16:02:42, from Hyderabad


Thank, you for Share This Type Post ,
And Its Really Help full who wants to know types and de scrption about bootstrap .. as like me . And Thanks Again, because i am thinking this type of Help full link, and i got you and your page ! thank you :) and thank you very much ! TC .. :) (-_-)

Published on 06.06.2015 01:53:46, from khilgaon , Dhaka, Bangladesh
Tomáš Janeček

You're welcome :)

Published on 07.06.2015 13:54:42, from Řehoty, Czech Republic

its to much good and nice explanation of every class. thankx

Published on 01.06.2015 12:57:46, from islamabad(pakistan)
Tomáš Janeček

Thanks for those words.

Published on 01.06.2015 13:21:33, from Řehoty, Czech Republic
Shaik Yakub

Nice Work...

Published on 30.05.2015 08:22:29, from Hyderabad
Tomáš Janeček

Thanks :)

Published on 30.05.2015 20:33:59, from Řehoty, Czech Republic
Hung Nguyen

Thank you so much!
I found that .wrap doesn't exist in bootstrap.css (Bootstrap 3)

Published on 09.04.2015 05:08:22, from Vietnam
Tomáš Janeček

Yes, that's true. Sorry, this was my custom class mixed into it. Removed

Published on 09.04.2015 08:21:50, from Řehoty, Czech Republic

Better you include examples of each class, so that beginners will learn.

Published on 24.03.2015 07:40:31


Awesome, This is exactly what I was looking for... This makes it easy to custumize your own themes thanks!!!!

Published on 21.03.2015 01:43:41, from Mexico
Tomáš Janeček

That's the purpose I made it for. Thank you! :)

Published on 21.03.2015 13:44:30, from Řehoty, Czech Republic

What a great class list, it's really helping me get to grips with BS3 without getting lost in amongst it all!! Great job Tomas

Published on 16.03.2015 21:02:37, from Clacton-On-Sea, United Kingdom
Tomáš Janeček

Thanks, it's always nice to hear that someone actually makes a good use of it :)

Published on 16.03.2015 23:00:23, from Řehoty, Czech Republic
Zahidul Islam

Hi Tomas,
Appreciate it.

Published on 12.03.2015 16:30:05, from IA,US


this was great man .... thank you

Published on 26.02.2015 10:10:58


Thank you Thomas. Its very helpfull[icon_smile]

Published on 04.02.2015 12:56:50, from Pune, India

Write a comment
 If you cann't see the verification code clearly.
Type the characters into the text field below(*)
This website uses cookies for ads, just like any other website. Further information