Typography

Tables

Forms

Buttons

button.btn.btn-default .btn-primary .btn-success .btn-info .btn-warning .btn-danger .btn-link

.btn-lg Default button size .btn-sm .btn-xs

.btn-block .btn-block

a button

a.active button.active a.disabled button[disabled]

Images

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

.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

Dropdowns

Button groups

Input groups

Navs

Navbar

Breadcrumbs

Pagination

Labels

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

Jumbotron

Page header

Thumbnails

Alerts

Progress bars

Media object

List group

Panels

Wells

Javascript

Modals

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

Via Javascript: $('#modal').modal() Launch 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"

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

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

Tooltips

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

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()

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"

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"

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

Carousel

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

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

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