Skip to content

Instantly share code, notes, and snippets.

@geksilla
Last active October 18, 2024 08:37
Show Gist options
  • Save geksilla/6543145 to your computer and use it in GitHub Desktop.
Save geksilla/6543145 to your computer and use it in GitHub Desktop.
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
@wellrootedmedia
Copy link

oh snap, awesome! Ty

@sannminwin
Copy link

Great, Thanks you for the lists.

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

@djhvscf
Copy link

djhvscf commented Jul 11, 2014

This list will be better when it has a description!

@aniketpatil11
Copy link

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

@panpixelov
Copy link

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

@jonathanbell
Copy link

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

@Mizuh0
Copy link

Mizuh0 commented Sep 15, 2014

This is great! Thanks so much

@BillyWM
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
Copy link

Thanks!

@liderdesarrollo
Copy link

Thanks

@bpsingh716
Copy link

Thanks For The list But Plz. Add description

@MedUnes
Copy link

MedUnes commented Apr 26, 2015

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

@njtt
Copy link

njtt commented Oct 9, 2015

@braicauc
Copy link

Thank you! Very good list!

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

http://www.afacerist.ro/

@Karthi2791
Copy link

nice

@fourwhitesocks
Copy link

Awesome, thank you!!

@sureshkonteti
Copy link

thnx it's useful list..

@JacobLett
Copy link

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
Copy link

Nice Very Usefull

@Govind0155
Copy link

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

@Hejprint
Copy link

Hejprint commented Apr 5, 2016

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

@tasawaruideveloper
Copy link

@VirendraWankhede
Copy link

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
Copy link

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

@greglomax
Copy link

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

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

Copy link

ghost commented Apr 11, 2017

Thanks very usefull

@adelante94
Copy link

adelante94 commented Apr 23, 2017

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

@JoeyEff
Copy link

JoeyEff commented Apr 28, 2017

Thank you!

@Slimaneha
Copy link

Thank you!

@shivendra143
Copy link

test

**** @

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