.container .row .col-md-9
Bootstrap TLDR
code.text-left
.text-center
.text-right
blockquote p
blockquote.blockquote-reverse p
ul
ol
ul.list-unstyled
ul.list-inline
dl
dl.dl-horizontal
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 | |||
form
form.form-inline
form.form-horizontal
Validation styles on form controls
.img-rounded
.img-circle
.img-thumbnail
.img-responsive
.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
.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.
Glyphicons classes:
glyphicon glyphicon-*
.dropdown ul.dropdown-menu
.btn-group
.btn-toolbar .btn-group
.btn-group.dropup
.input-group
.input-group-lg
.input-group-sm
ul.nav.nav-tabs
ul.nav.nav-pills
ul.nav.nav-pills.nav-stacked
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
.label.label-default .label.label-primary .label.label-success .label.label-info .label.label-warning .label.label-danger
.jumbotron
.thumbnail
.thumbnail
.thumbnail
.thumbnail
.progress
.progress .progress-bar.progress-bar-striped
.progress.active .progress-bar.progress-bar-striped
ul.list-group
div.list-group
.panel.panel-default
.panel.panel-primary
.panel.panel-success
.panel.panel-info
.panel.panel-warning (with table)
| Header | Header | Header |
|---|---|---|
| Data | Data | Data |
| Data | Data | Data |
.panel.panel-danger (with list group)
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
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
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
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
Usage: $('[data-toggle="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
Via data attributes (close button): data-dismiss="alert"
Via Javascript: $('.alert').alert()
Methods: .alert('close')
Events: close.bs.alert closed.bs.alert
Stateful button: data-loading-text="Loading..." data-complete-text="Completed"
Methods: .button('toggle') .button('loading') .button('reset') .button(string)
Via data attributes: data-toggle="collapse"
#accordion.panel-group
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()
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
