.container .row .col-md-9

Bootstrap TLDR Bootstrap v3.3.0 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 List item List item List item List item 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 th Header Header tbody tr td td Data Data Data Data Data Data

.table-striped Header Header Data Data Data Data .table-bordered Header Header Data Data Data Data

.table-hover Header Header Data Data Data Data .table-condensed Header Header Data Data Data Data

div.table-responsive table.table Header Header Header Header Header 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 textarea.form-control input[type="file"] .help-block: Wrap labels and controls in .form-group for optimum spacing. Submit

form.form-inline .checkbox input[type="checkbox"] Submit

form.form-horizontal label.control-label label.control-label label.control-label Checkboxes .checkbox input[type="checkbox"] label.checkbox-inline Checkbox #1 Checkbox #2 Disabled checkbox #3 Radios .radio input[type="radio"] label.radio-inline Radio #1 Radio #2 Disabled radio #3 select.form-control option Option #2 Option #3

select[disabled]

select.form-control[multiple] Option #1 option[selected] Option #3 Selected option #4 Option #5 Static control p.form-control-static Disabled input Submit

Validation styles on form controls .has-success .has-feedback .has-warning .has-feedback .has-error .has-feedback

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

.img-rounded .img-circle .img-thumbnail .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

asterisk plus

plus minus

minus ok

ok remove

remove

remove-circle

remove-circle ok-circle

ok-circle ban-circle

ban-circle

copyright-mark

copyright-mark registration-mark

chevron-left

chevron-left chevron-right

chevron-right chevron-up

chevron-up chevron-down

chevron-down

arrow-left

arrow-left arrow-right

arrow-right arrow-up

arrow-up arrow-down

arrow-down

hand-left

hand-left hand-right

hand-right hand-up

hand-up hand-down

hand-down thumbs-up

thumbs-up thumbs-down

thumbs-down

circle-arrow-left

circle-arrow-left circle-arrow-right

circle-arrow-right circle-arrow-up

circle-arrow-up circle-arrow-down

signal

signal envelope

envelope inbox

inbox cloud

cloud

cloud-download

cloud-download cloud-upload

cloud-upload download-alt

download-alt download

download upload

upload

transfer

transfer share-alt

share-alt send

send retweet

open

open save

save saved

saved import

import export

export

play

play pause

pause stop

stop eject

eject

fast-backward

fast-backward step-backward

step-backward backward

backward forward

forward step-forward

step-forward fast-forward

zoom-in

zoom-in zoom-out

zoom-out fullscreen

fullscreen

resize-full

resize-full resize-small

resize-small resize-vertical

resize-vertical resize-horizontal

resize-horizontal

eye-open

eye-open eye-close

check

check unchecked

unchecked expand

expand collapse-down

collapse-down collapse-up

collapse-up

log-in

log-in log-out

log-out new-window

new-window edit

edit share

font

font bold

bold italic

italic header

header text-height

text-height text-width

text-width

align-left

align-left align-center

align-center align-right

align-right align-justify

align-justify indent-left

indent-left indent-right

indent-right

list

list list-alt

list-alt th-list

th-list th-large

th-large th

th filter

sort

sort sort-by-alphabet

sort-by-alphabet sort-by-alphabet-alt

sort-by-alphabet-alt sort-by-order

sort-by-order sort-by-order-alt

sort-by-order-alt sort-by-attributes

sort-by-attributes sort-by-attributes-alt

floppy-disk

floppy-disk floppy-saved

floppy-saved floppy-remove

floppy-remove floppy-save

floppy-save floppy-open

home

home dashboard

dashboard tasks

tasks stats

stats link

link comment

calendar

calendar time

time print

print

user

user certificate

certificate qrcode

qrcode barcode

globe

globe tower

tower road

road tree-conifer

tree-conifer tree-deciduous

tree-deciduous leaf

leaf

heart

heart heart-empty

heart-empty star

star star-empty

star-empty flash

flash fire

search

search flag

flag pencil

pencil wrench

wrench cog

cog cutlery

cutlery

plane

plane trash

trash shopping-cart

shopping-cart briefcase

briefcase gift

gift glass

glass

phone-alt

phone-alt earphone

earphone phone

phone bullhorn

bullhorn bell

bell

hdd

hdd folder-close

folder-close folder-open

folder-open file

file tags

tag

tag book

book bookmark

bookmark

lock

lock compressed

compressed magnet

magnet paperclip

paperclip pushpin

plus-sign

plus-sign minus-sign

minus-sign remove-sign

remove-sign ok-sign

ok-sign question-sign

question-sign info-sign

info-sign exclamation-sign

exclamation-sign warning-sign

picture

picture map-marker

map-marker adjust

adjust tint

tint move

move screenshot

film

film camera

camera facetime-video

facetime-video

sd-video

sd-video hd-video

hd-video subtitles

music

music headphones

headphones

volume-off

volume-off volume-down

volume-down volume-up

volume-up

play-circle

play-circle repeat

repeat record

record off

off random

random refresh

sound-stereo

sound-stereo sound-dolby

sound-dolby sound-5-1

sound-5-1 sound-6-1

sound-6-1 sound-7-1

credit-card

credit-card euro

euro usd

usd gbp

Dropdowns

Button groups

.btn-group #1 #2 #3

.btn-toolbar .btn-group .btn-group-lg #1 #2 #3 .btn-group-sm #1 #2 #3 .btn-group-xs #1 #2 #3

Input groups

.input-group .input-group-addon .input-group-btn button

.input-group-lg Addon Addon

.input-group-sm Addon Addon

Navs

.navbar.navbar-default .container-fluid

.navbar.navbar-inverse .container-fluid

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

Pagination

Labels

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

Jumbotron

.jumbotron Heading Paragraph Button

Page header

.page-header h3 small

Thumbnails

.thumbnail .thumbnail .thumbnail .thumbnail

Alerts

× .alert.alert-dismissible

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

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 Header Header Header Data Data Data Data Data Data .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

.modal .modal-dialog .modal-content × .modal-header h4.modal-title .modal-body

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

× .modal-title .modal-body

× .modal-title .modal-body

× .modal-title .modal-body

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

Left Top Bottom Right

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

Left Top Bottom Right

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"

$('#stateful').button('loading') $('#stateful').button('complete') $('#stateful').button('reset')

Single toggle: [data-toggle="button"]

data-toggle="buttons" #1 #2 Disabled #4 Checkbox:

data-toggle="buttons" #1 #2 Disabled #4 Radio:

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

.carousel.slide .carousel-caption h3 Paragraph

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

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