CSS
Typography
h1 small
h3 small
h5 small
b (bold)
strong
.small
i (italic)
ins
u (underline)
codevar
samp
kbd
.text-left
.text-center
.text-right
blockquote p
blockquote-reverse p
- li
-
List item
- ul li
- List item
- List item
- List item
-
List item
- List item
- List item
- List item
- List item
-
List item
- List item
- List item
- List item
- List item
- List item
- List item
- dt
- dd
- Term
- Description
Description
- Term
- Description
- Long term will be truncated
- Description
Description
Tables
| thead tr th | th | Header | Header |
|---|---|---|---|
| tbody tr td | td | Data | Data |
| Data | Data | Data | Data |
| Header | Header |
|---|---|
| Data | Data |
| Data | Data |
| Header | Header |
|---|---|
| Data | Data |
| Data | Data |
| Header | Header |
|---|---|
| Data | Data |
| Data | Data |
| Header | Header |
|---|---|
| Data | Data |
| Data | Data |
| Header | Header | Header | Header | Header |
|---|---|---|---|---|
| table-active | table-success | table-info | table-warning | table-danger |
| tr.table-active td | Applies the hover color to a particular row or cell | |||
| tr.table-success td | Indicates a successful or positive action | |||
| tr.table-info td | Indicates a neutral informative change or action | |||
| tr.table-warning td | Indicates a warning that might need attention | |||
| tr.table-danger td | Indicates a dangerous or potentially negative action | |||
Forms
Buttons
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
.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.
Components
Button groups
Input groups
Navs
Breadcrumbs
Pagination
Labels
.label.label-default .label.label-primary .label.label-success .label.label-info .label.label-warning .label.label-danger
Jumbotron
Hello, world!
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
It uses utility classes for typography and spacing to space content out within the larger container.
Alerts
Progress bars
Media object
.media-body h4.media-heading
← a.media-left img.media-object
.media-body h4.media-heading
← a.media-left.media-middle img.media-object
.media .media-body h4.media-heading
← a.media-left img.media-object-
li.media .media-body h4.media-heading
← a.media-left.media-bottom img.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 →
List group
- li.list-group-item
- List item #2 .badge
- List item #3
Cards
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
ButtonCard title
Some quick example text to build on the card title and make up the bulk of the card's content.
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
Some quick example text to build on the card title and make up the bulk of the card's content.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link Another linkCard title
Support card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link Another linkSpecial title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereSpecial title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereSpecial title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereSpecial title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereSpecial title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereFeatured
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereCard title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Special title treatment
With supporting text below as a natural lead-in to additional content.
ButtonLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Card title that wraps to a new line
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Card title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.
Card title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
Last updated 3 mins ago