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
[email protected]

blockquote p

footer cite

blockquote-reverse p

footer cite
  • li
  • List item
    • ul li
    • List item
  • List item
  1. List item
  2. List item
    1. List item
    2. List item
  3. 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

We'll never share your email with anyone else.
This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.

Buttons

Link

Primary link Link

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

Button groups



 

#1 #2 #3

Input groups

.input-group-addon
Addon Addon
Addon Addon

Pagination

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

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.

Learn more

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

0% 25% 50% 75% 100%
10% 25% 50% 75% 100%

Media object

.media-object

.media-body h4.media-heading

← a.media-left img.media-object

.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

  • .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

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

Cards

Card image cap

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Button
Card image cap

Card 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
Card image cap

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 link

Card title

Support card subtitle
Card image

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
Card image cap

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

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

Card image cap
Card image

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.

Button

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
Card image cap

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.

Someone famous in Source Title
Card image cap

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.

Someone famous in Source Title

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

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