Skip to content

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.

Copy link

stasyanx commented Jan 21, 2014

useless without description

@actionakin

This comment has been minimized.

Copy link

actionakin commented Feb 17, 2014

very useful

@vamsichowdary

This comment has been minimized.

Copy link

vamsichowdary commented Feb 20, 2014

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

@crushy77

This comment has been minimized.

Copy link

crushy77 commented Feb 21, 2014

Cant i get a description

@wellrootedmedia

This comment has been minimized.

Copy link

wellrootedmedia commented Apr 25, 2014

oh snap, awesome! Ty

@sannminwin

This comment has been minimized.

Copy link

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.

Copy link

djhvscf commented Jul 11, 2014

This list will be better when it has a description!

@aniketpatil11

This comment has been minimized.

Copy link

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.

Copy link

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.

Copy link

jonathanbell commented Sep 11, 2014

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

@Mizuh0

This comment has been minimized.

Copy link

Mizuh0 commented Sep 15, 2014

This is great! Thanks so much

@BillyWM

This comment has been minimized.

Copy link

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.

Copy link

duduindo commented Dec 12, 2014

Thanks!

@liderdesarrollo

This comment has been minimized.

Copy link

liderdesarrollo commented Jan 2, 2015

Thanks

@bpsingh716

This comment has been minimized.

Copy link

bpsingh716 commented Apr 24, 2015

Thanks For The list But Plz. Add description

@MedUnes

This comment has been minimized.

Copy link

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.

Copy link

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.

Copy link

Karthi2791 commented Oct 28, 2015

nice

@fourwhitesocks

This comment has been minimized.

Copy link

fourwhitesocks commented Dec 3, 2015

Awesome, thank you!!

@sureshkonteti

This comment has been minimized.

Copy link

sureshkonteti commented Dec 13, 2015

thnx it's useful list..

@JacobLett

This comment has been minimized.

Copy link

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.

Copy link

SunnyEMarcellus commented Mar 4, 2016

Nice Very Usefull

@Govind0155

This comment has been minimized.

Copy link

Govind0155 commented Mar 16, 2016

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

@Hejprint

This comment has been minimized.

Copy link

Hejprint commented Apr 5, 2016

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

@tasawaruideveloper

This comment has been minimized.

@VirenPatil21

This comment has been minimized.

Copy link

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.

Copy link

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.

Copy link

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.

Copy link

ghost commented Apr 11, 2017

Thanks very usefull

@adelante94

This comment has been minimized.

Copy link

adelante94 commented Apr 23, 2017

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

@JoeyEff

This comment has been minimized.

Copy link

JoeyEff commented Apr 28, 2017

Thank you!

@Slimaneha

This comment has been minimized.

Copy link

Slimaneha commented May 5, 2017

Thank you!

@shivendra143

This comment has been minimized.

Copy link

shivendra143 commented May 5, 2017

test

**** @
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.