Instantly share code, notes, and snippets.

Embed
What would you like to do?
Bootstrap css class list
.navbar
.caret
.label
.table
.img-responsive
.img-rounded
.img-thumbnail
.img-circle
.sr-only
.lead
.text-muted
.text-primary
.text-warning
.text-danger
.text-success
.text-info
.text-left
.text-right
.text-center
.h6
.h1
.h2
.h3
.h4
.h5
.page-header
.list-unstyled
.list-inline
.initialism
.pull-right
.prettyprint
.pre-scrollable
.container
.row
.col-lg-12
.col-xs-11
.col-xs-1
.col-xs-2
.col-xs-3
.col-xs-4
.col-xs-5
.col-xs-6
.col-xs-7
.col-xs-8
.col-xs-9
.col-xs-10
.col-xs-12
.col-sm-11
.col-sm-1
.col-sm-2
.col-sm-3
.col-sm-4
.col-sm-5
.col-sm-6
.col-sm-7
.col-sm-8
.col-sm-9
.col-sm-10
.col-sm-12
.col-sm-push-1
.col-sm-push-2
.col-sm-push-3
.col-sm-push-4
.col-sm-push-5
.col-sm-push-6
.col-sm-push-7
.col-sm-push-8
.col-sm-push-9
.col-sm-push-10
.col-sm-push-11
.col-sm-pull-1
.col-sm-pull-2
.col-sm-pull-3
.col-sm-pull-4
.col-sm-pull-5
.col-sm-pull-6
.col-sm-pull-7
.col-sm-pull-8
.col-sm-pull-9
.col-sm-pull-10
.col-sm-pull-11
.col-sm-offset-1
.col-sm-offset-2
.col-sm-offset-3
.col-sm-offset-4
.col-sm-offset-5
.col-sm-offset-6
.col-sm-offset-7
.col-sm-offset-8
.col-sm-offset-9
.col-sm-offset-10
.col-sm-offset-11
.col-md-11
.col-md-1
.col-md-2
.col-md-3
.col-md-4
.col-md-5
.col-md-6
.col-md-7
.col-md-8
.col-md-9
.col-md-10
.col-md-12
.col-md-push-0
.col-md-push-1
.col-md-push-2
.col-md-push-3
.col-md-push-4
.col-md-push-5
.col-md-push-6
.col-md-push-7
.col-md-push-8
.col-md-push-9
.col-md-push-10
.col-md-push-11
.col-md-pull-0
.col-md-pull-1
.col-md-pull-2
.col-md-pull-3
.col-md-pull-4
.col-md-pull-5
.col-md-pull-6
.col-md-pull-7
.col-md-pull-8
.col-md-pull-9
.col-md-pull-10
.col-md-pull-11
.col-md-offset-0
.col-md-offset-1
.col-md-offset-2
.col-md-offset-3
.col-md-offset-4
.col-md-offset-5
.col-md-offset-6
.col-md-offset-7
.col-md-offset-8
.col-md-offset-9
.col-md-offset-10
.col-md-offset-11
.col-lg-11
.col-lg-1
.col-lg-2
.col-lg-3
.col-lg-4
.col-lg-5
.col-lg-6
.col-lg-7
.col-lg-8
.col-lg-9
.col-lg-10
.col-lg-push-0
.col-lg-push-1
.col-lg-push-2
.col-lg-push-3
.col-lg-push-4
.col-lg-push-5
.col-lg-push-6
.col-lg-push-7
.col-lg-push-8
.col-lg-push-9
.col-lg-push-10
.col-lg-push-11
.col-lg-pull-0
.col-lg-pull-1
.col-lg-pull-2
.col-lg-pull-3
.col-lg-pull-4
.col-lg-pull-5
.col-lg-pull-6
.col-lg-pull-7
.col-lg-pull-8
.col-lg-pull-9
.col-lg-pull-10
.col-lg-pull-11
.col-lg-offset-0
.col-lg-offset-1
.col-lg-offset-2
.col-lg-offset-3
.col-lg-offset-4
.col-lg-offset-5
.col-lg-offset-6
.col-lg-offset-7
.col-lg-offset-8
.col-lg-offset-9
.col-lg-offset-10
.col-lg-offset-11
.table-bordered
.table-responsive
.form-control
.form-group
.checkbox
.checkbox-inline
.input-sm
.input-lg
.control-label
.input-group-addon
.form-control-static
.help-block
.btn
.active
.btn-default
.btn-primary
.btn-warning
.btn-danger
.btn-success
.btn-info
.btn-link
.btn-lg
.btn-xs
.btn-block
.fade
.in
.collapse
.collapsing
.glyphicon
.dropdown
.dropdown-menu
.divider
.dropdown-header
.dropdown-backdrop
.btn-group-vertical
.btn-group
.dropdown-toggle
.btn-group-justified
.input-group
.col
.input-group-btn
.nav
.nav-divider
.nav-tabs
.nav-justified
.nav-tabs-justified
.pill-pane
.navbar-header
.navbar-collapse
.navbar-static-top
.navbar-fixed-bottom
.navbar-fixed-top
.navbar-brand
.navbar-toggle
.icon-bar
.navbar-nav
.navbar-left
.navbar-right
.navbar-form
.navbar-btn
.navbar-text
.navbar-default
.navbar-link
.navbar-inverse
.breadcrumb
.pagination
.pager
.label-default
.label-primary
.label-success
.label-info
.label-warning
.label-danger
.badge
.jumbotron
.thumbnail
.caption
.alert
.alert-link
.alert-dismissable
.close
.alert-success
.alert-info
.alert-warning
.alert-danger
.progress
.progress-bar
.progress-bar-success
.progress-bar-info
.progress-bar-warning
.progress-bar-danger
.media-body
.media
.media-object
.media-heading
.pull-left
.media-list
.list-group
.list-group-item
.list-group-item-heading
.list-group-item-text
.panel
.panel-body
.panel-heading
.panel-title
.panel-footer
.panel-default
.panel-primary
.panel-success
.panel-warning
.panel-danger
.panel-info
.well
.well-lg
.well-sm
.modal-open
.modal
.modal-dialog
.modal-content
.modal-backdrop
.modal-header
.modal-title
.modal-body
.modal-footer
.tooltip
.top
.right
.bottom
.left
.tooltip-inner
.tooltip-arrow
.popover
.popover-title
.popover-content
.arrow
.carousel
.carousel-inner
.item
.prev
.next
.carousel-control
.glyphicon-chevron-right
.icon-next
.carousel-indicators
.carousel-caption
.hide
.show
.invisible
.text-hide
.affix
.hidden
.visible-xs
.visible-sm
.visible-md
.visible-lg
.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg
.visible-print
.hidden-print
@stasyanx

This comment has been minimized.

stasyanx commented Jan 21, 2014

useless without description

@actionakin

This comment has been minimized.

actionakin commented Feb 17, 2014

very useful

@vamsichowdary

This comment has been minimized.

vamsichowdary commented Feb 20, 2014

it's useful but if description is available user can learn easily

@crushy77

This comment has been minimized.

crushy77 commented Feb 21, 2014

Cant i get a description

@wellrootedmedia

This comment has been minimized.

wellrootedmedia commented Apr 25, 2014

oh snap, awesome! Ty

@sannminwin

This comment has been minimized.

sannminwin commented Jul 5, 2014

Great, Thanks you for the lists.

You can find description on http://getbootstrap.com/

@djhvscf

This comment has been minimized.

djhvscf commented Jul 11, 2014

This list will be better when it has a description!

@aniketpatil11

This comment has been minimized.

aniketpatil11 commented Jul 13, 2014

Hey guys...
you will find it on http://blog.seosemanticxhtml.com/a-complete-reference-library-of-bootstrap-classes/
with description !!!!!!!!!!!!!!

@panpixelov

This comment has been minimized.

panpixelov commented Jul 14, 2014

Aniketpatil007 that's reference to an old version of bootstrap 2.x, there are many changes in bootstrap 3

@jonathanbell

This comment has been minimized.

jonathanbell commented Sep 11, 2014

Thanks! I think it's useful for sure! :)

@Mizuh0

This comment has been minimized.

Mizuh0 commented Sep 15, 2014

This is great! Thanks so much

@BillyWM

This comment has been minimized.

BillyWM commented Oct 24, 2014

I disagree that this is useless without a description. When you're just starting to learn Bootstrap and looking at people's live sites as examples, it's handy to have a reference telling you which classes are built-in and which are user-defined. This is a jumping-off point for you to type the names in Google and learn more about them (though many of the names are sufficiently descriptive as it is)

Anyhow, this is outdated, so I went ahead and generated an updated list for 3.2.0:

https://github.com/BillyWM/scraps/blob/master/bootstrap/bootstrap-full-class-list.txt

@duduindo

This comment has been minimized.

duduindo commented Dec 12, 2014

Thanks!

@liderdesarrollo

This comment has been minimized.

liderdesarrollo commented Jan 2, 2015

Thanks

@bpsingh716

This comment has been minimized.

bpsingh716 commented Apr 24, 2015

Thanks For The list But Plz. Add description

@MedUnes

This comment has been minimized.

MedUnes commented Apr 26, 2015

I was looking for it.
what about developing a np++ to manage them?

@njtt

This comment has been minimized.

@braicauc

This comment has been minimized.

braicauc commented Oct 17, 2015

Thank you! Very good list!

Those of you who want de descriptions just use a search engine.

http://www.afacerist.ro/

@Karthi2791

This comment has been minimized.

Karthi2791 commented Oct 28, 2015

nice

@fourwhitesocks

This comment has been minimized.

fourwhitesocks commented Dec 3, 2015

Awesome, thank you!!

@sureshkonteti

This comment has been minimized.

sureshkonteti commented Dec 13, 2015

thnx it's useful list..

@JacobLett

This comment has been minimized.

JacobLett commented Feb 7, 2016

I created a desk reference pdf and a sortable table with descriptions to help sort through the list. You can find it here. https://bootstrapcreative.com/resources/bootstrap-3-css-classes-index/

@SunnyEMarcellus

This comment has been minimized.

SunnyEMarcellus commented Mar 4, 2016

Nice Very Usefull

@Govind0155

This comment has been minimized.

Govind0155 commented Mar 16, 2016

Very good information..........

@Hejprint

This comment has been minimized.

Hejprint commented Apr 5, 2016

what with .form-inline and .form-horizontal?

@tasawaruideveloper

This comment has been minimized.

@VirenPatil21

This comment has been minimized.

VirenPatil21 commented Aug 26, 2016

Following link is useful to use Bootstrap classess with its description
http://tomasjanecek.cz/en/clanky/post/list-of-bootstrap-3-css-classes-with-description

@brandonFairbanks

This comment has been minimized.

brandonFairbanks commented Sep 7, 2016

If this had descriptions, it would be extremely useful. Without them, it's only mildly helpful.

@greglomax

This comment has been minimized.

greglomax commented Nov 29, 2016

I like this link, below. It allows you to preview the class.

http://www.w3schools.com/bootstrap/bootstrap_ref_all_classes.asp

@ghost

This comment has been minimized.

ghost commented Apr 11, 2017

Thanks very usefull

@adelante94

This comment has been minimized.

adelante94 commented Apr 23, 2017

but I want know which class is subset of another class.

@JoeyEff

This comment has been minimized.

JoeyEff commented Apr 28, 2017

Thank you!

@Slimaneha

This comment has been minimized.

Slimaneha commented May 5, 2017

Thank you!

@shivendra143

This comment has been minimized.

shivendra143 commented May 5, 2017

test

**** @
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment