Fork me on GitHub

.container .row .col-md-9

Bootstrap TLDR

All Bootstrap's components in one page
Briefly presented with their own CSS selectors

CSS

Typography

h1 small

.h2 small

h3 small

.h4 small
h5 small
.h6 small
.lead
b (bold)
strong
small
.small
em
i (italic)
del
s (strikethrough)
ins
u (underline)
code
var
samp
mark
kbd

.text-left

.text-center

.text-right

.text-justify

.text-lowercase .text-uppercase .text-capitalize

abbr .initialism

address strong
address
first.last@example.com

blockquote p

footer cite

blockquote.blockquote-reverse p

Someone famous in Source Title

ul

  • li
  • List item
    • ul li
    • List item
  • List item

ol

  1. List item
  2. List item
    1. List item
    2. List item
  3. List item

ul.list-unstyled

  • List item
  • List item
    • List item
    • List item
  • List item

ul.list-inline

  • List item
  • List item
  • List item

dl

dt
dd
Term
Description
Description

dl.dl-horizontal

Term
Description
Long term will be truncated
Description
Description

Tables

table.table

thead tr th thHeaderHeader
tbody tr td tdDataData
DataDataDataData

.table-striped

HeaderHeader
DataData
DataData

.table-bordered

HeaderHeader
DataData
DataData

.table-hover

HeaderHeader
DataData
DataData

.table-condensed

HeaderHeader
DataData
DataData

div.table-responsive table.table

Header HeaderHeaderHeaderHeader
td.active td.success td.info td.warning td.danger
tr.active td Applies the hover color to a particular row or cell
tr.success td Indicates a successful or positive action
tr.info td Indicates a neutral informative change or action
tr.warning td Indicates a warning that might need attention
tr.danger td Indicates a dangerous or potentially negative action

Forms

form

.help-block: Wrap labels and controls in .form-group for optimum spacing.

form.form-inline


form.form-horizontal



select.form-control[multiple]

p.form-control-static

Validation styles on form controls

Buttons

a

a.active a.disabled

Images

.img-rounded

.img-rounded

.img-circle

.img-circle

.img-thumbnail

.img-thumbnail

.img-responsive

.img-responsive

Helper classes

.text-muted .text-primary .text-success .text-info .text-warning .text-danger

.bg-primary .bg-success .bg-info .bg-warning .bg-danger

button.close →

.caret

.clearfix

.pull-left
.pull-right

.center-block: Set an element to display: block and center via margin.

.show and .hidden: Showing and hiding content.
.invisible: Toggle only the visibility of an element.

.sr-only: Hide an element to all devices except screen readers.

.text-hide: Replace an element's text content with a background image.

Components

Glyphicons

Glyphicons classes: glyphicon glyphicon-*

  • asterisk
  • plus
  • minus
  • ok
  • remove

  • remove-circle
  • ok-circle
  • ban-circle

  • copyright-mark
  • registration-mark
  • chevron-left
  • chevron-right
  • chevron-up
  • chevron-down

  • arrow-left
  • arrow-right
  • arrow-up
  • arrow-down

  • hand-left
  • hand-right
  • hand-up
  • hand-down
  • thumbs-up
  • thumbs-down

  • circle-arrow-left
  • circle-arrow-right
  • circle-arrow-up
  • circle-arrow-down
  • signal
  • envelope
  • inbox
  • cloud

  • cloud-download
  • cloud-upload
  • download-alt
  • download
  • upload

  • transfer
  • share-alt
  • send
  • retweet
  • open
  • save
  • saved
  • import
  • export

  • play
  • pause
  • stop
  • eject

  • fast-backward
  • step-backward
  • backward
  • forward
  • step-forward
  • fast-forward
  • zoom-in
  • zoom-out
  • fullscreen

  • resize-full
  • resize-small
  • resize-vertical
  • resize-horizontal

  • eye-open
  • eye-close
  • check
  • unchecked
  • expand
  • collapse-down
  • collapse-up

  • log-in
  • log-out
  • new-window
  • edit
  • share
  • font
  • bold
  • italic
  • header
  • text-height
  • text-width

  • align-left
  • align-center
  • align-right
  • align-justify
  • indent-left
  • indent-right

  • list
  • list-alt
  • th-list
  • th-large
  • th
  • filter
  • sort
  • sort-by-alphabet
  • sort-by-alphabet-alt
  • sort-by-order
  • sort-by-order-alt
  • sort-by-attributes
  • sort-by-attributes-alt
  • floppy-disk
  • floppy-saved
  • floppy-remove
  • floppy-save
  • floppy-open
  • home
  • dashboard
  • tasks
  • stats
  • link
  • comment
  • calendar
  • time
  • print

  • user
  • certificate
  • qrcode
  • barcode
  • globe
  • tower
  • road
  • tree-conifer
  • tree-deciduous
  • leaf

  • heart
  • heart-empty
  • star
  • star-empty
  • flash
  • fire
  • search
  • flag
  • pencil
  • wrench
  • cog
  • cutlery

  • plane
  • trash
  • shopping-cart
  • briefcase
  • gift
  • glass

  • phone-alt
  • earphone
  • phone
  • bullhorn
  • bell

  • hdd
  • folder-close
  • folder-open
  • file
  • tags
  • tag
  • book
  • bookmark

  • lock
  • compressed
  • magnet
  • paperclip
  • pushpin
  • plus-sign
  • minus-sign
  • remove-sign
  • ok-sign
  • question-sign
  • info-sign
  • exclamation-sign
  • warning-sign
  • picture
  • map-marker
  • adjust
  • tint
  • move
  • screenshot
  • film
  • camera
  • facetime-video

  • sd-video
  • hd-video
  • subtitles
  • music
  • headphones

  • volume-off
  • volume-down
  • volume-up

  • play-circle
  • repeat
  • record
  • off
  • random
  • refresh
  • sound-stereo
  • sound-dolby
  • sound-5-1
  • sound-6-1
  • sound-7-1
  • credit-card
  • euro
  • usd
  • gbp

.dropdown ul.dropdown-menu

Button groups

.btn-group


.btn-toolbar .btn-group


 

.btn-group.btn-group-justified

#1 #2 #3

.btn-group.dropup

Input groups

.input-group

.input-group-addon

.input-group-lg

Addon Addon

.input-group-sm

Addon Addon

ul.nav.nav-tabs.nav-justified


ul.nav.nav-pills.nav-justified

.navbar.navbar-default .container-fluid

.navbar.navbar-inverse .container-fluid

Complex navbar with navbar-left, navbar-right and navbar-collapse.

ol.breadcrumb

Pagination

ul.pagination.pagination-lg
ul.pagination.pagination-sm

Labels

.label.label-default .label.label-primary .label.label-success .label.label-info .label.label-warning .label.label-danger

Jumbotron

.jumbotron

Heading

Paragraph

Button

Thumbnails

.thumbnail

thumbnail

.caption h3

Paragraph

Button

.thumbnail

thumbnail

Caption

Paragraph

Button

.thumbnail

thumbnail

Caption

Paragraph

Button

.thumbnail

thumbnail

Caption

Paragraph

Button

Alerts

.alert.alert-dismissible
.alert.alert-success a.alert-link
.alert.alert-info a.alert-link
.alert.alert-warning a.alert-link
.alert.alert-danger a.alert-link

Progress bars

.progress

.progress-bar
.progress-bar.progress-bar-success
.progress-bar.progress-bar-info
.progress-bar.progress-bar-warning
.progress-bar.progress-bar-danger

.progress .progress-bar.progress-bar-striped

.progress.active .progress-bar.progress-bar-striped

Media object

.media
.media-object

.media-body h4.media-heading

← a.media-left img.media-object

.media
.media-object

.media-body h4.media-heading

← a.media-left.media-middle img.media-object
.media-object

.media .media-body h4.media-heading

← a.media-left img.media-object

ul.media-list
  • .media-object

    li.media .media-body h4.media-heading

    ← a.media-left.media-bottom img.media-object
    .media-object

    .media .media-body h4.media-heading

    ← a.media-left img.media-object
  • li.media .media-body h4.media-heading

    a.media-right img.media-object →
    .media-object

List group

ul.list-group

  • li.list-group-item
  • List item #2 .badge
  • List item #3

Panels

.panel.panel-default

.panel-heading

.panel-heading h3.panel-title

.panel-body

.panel.panel-primary

.panel-heading
.panel-body

.panel.panel-success

.panel-heading
.panel-body

.panel.panel-info

.panel-heading
.panel-body

.panel.panel-warning (with table)

.panel-heading
HeaderHeaderHeader
DataDataData
DataDataData

.panel.panel-danger (with list group)

.panel-heading
  • List item
  • List item
  • List item

Wells

.well.well-lg
.well
.well.well-sm

Javascript

Modals

Via data attributes: data-toggle="modal" data-target="#modal" Launch modal

Via Javascript: $('#modal').modal() Launch modal

Large modal Small modal

Options: backdrop: true|false|'static' keyboard: true|false show: true|false remote: false|path

Methods: .modal('toggle') .modal('show') .modal('hide')

Events: show.bs.modal shown.bs.modal hide.bs.modal hidden.bs.modal loaded.bs.modal

Dropdowns

Via data attributes: data-toggle="dropdown"


Via Javascript: $('.dropdown-toggle').dropdown()(data-toggle="dropdown" still required)

Methods: .dropdown('toggle')

Events: show.bs.dropdown shown.bs.dropdown hide.bs.dropdown hidden.bs.dropdown

Tabs

Via data attributes: data-toggle="tab"

Content #1: .table-content .tab-pane.active

Content #2: .table-content .tab-pane

Via Javascript: $(this).tab('show')

Content #1: .table-content .tab-pane.fade.in.active

Content #2: .table-content .tab-pane.fade

Events: show.bs.tab shown.bs.tab

Tooltips

Usage: $('[data-toggle="tooltip"]').tooltip()

You must initialize them yourself

Options: animation: true|false html: false|true selector: false|string
title: ''|function container: false|string
placement: top|location|auto|function
trigger: hover focus|click|manual
delay: 0|{show:500, hide:100}

Methods: .tooltip('show') .tooltip('hide') .tooltip('toggle') .tooltip('destroy')

Events: show.bs.tooltip shown.bs.tooltip hide.bs.tooltip hidden.bs.tooltip

Popovers

Usage: $('[data-toggle="popover"]').popover()

Popover

You must initialize them yourself


Options: animation: true|false html: false|true selector: false|string
title: ''|function content: ''|function container: false|string
placement: right|location|auto|function
trigger: click|hover|focus|manual
delay: 0|{show:500, hide:100}

Methods: .popover('show') .popover('hide') .popover('toggle') .popover('destroy')

Events: show.bs.popover shown.bs.popover hide.bs.popover hidden.bs.popover

Alerts

Via data attributes (close button): data-dismiss="alert"

.alert.alert-danger.fade.in

Via Javascript: $('.alert').alert()

Methods: .alert('close')

Events: close.bs.alert closed.bs.alert

Buttons

Stateful button: data-loading-text="Loading..." data-complete-text="Completed"


Single toggle:

Checkbox: data-toggle="buttons"

Radio: data-toggle="buttons"

Methods: .button('toggle') .button('loading') .button('reset') .button(string)

Collapse

Via data attributes: data-toggle="collapse"

Via Javascript: $(".collapse").collapse()

Options: parent: false|selector toggle: true|false

Methods: .collapse('toggle') .collapse('show') .collapse('hide')

Events: show.bs.collapse shown.bs.collapse hide.bs.collapse hidden.bs.collapse

Via data attributes: data-target="#carousel" data-slide data-slide-to data-ride

Via Javascript: $('.carousel').carousel()

.carousel.slide


Options: interval: 5000 pause: hover wrap: true|false

Methods: .carousel('cycle') .carousel('pause') .carousel(number) .carousel('prev') .carousel('next')

Events: slide.bs.carousel slid.bs.carousel