Utilities

align-{baseline|bottom|middle}

align-text-{bottom|top}

Use align and align-text to easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements.

Vertical-align only affects inline, inline-block, inline-table, and table cell elements.

bg-{primary|info|success|warning|danger}

Use bg with a selected color to change the background of the element.

btn-{default|primary|info|success|warning|danger}

btn-{link}

btn-{xs|sm|lg}

btn-{block}

Use btn modifiers to change the background of the button, set its size, or set it to fill its parent container with 'block'.

To force a button to resemble a plain link, use the btn-link class.

caret

Add the caret class to a span element to add a caret character to any other element.

container-{fluid}

Add container to a wrapper element to add significant left and right gutters to the page. Adding fluid will reduce the gutters significantly and fill more of the page with content.

show

hidden

hidden-{xs|sm|md|lg|print}

Add hidden to any element you want not to display. Analogous to "display: none." Visible and show shows the element.

Add hidden-print to make the element visible only in browsers, and hidden when printed.

img-{responsive|rounded|thumbnail|circle}

Add display types to the img element to change its border-radius property.

lead

Lead text is larger. Typographically, it's somewhere between a paragraph and a heading.

list-{unstyled|inline}

Use list-unstyled and remove bullet points. Use list-inline to convert a vertical list (default) to horizontal.

pull-{left|right}

Add pull and a direction to float an element left or right.

sr-only

sr-only-focusable

Use the sr-only to hide elements from all but screen readers. Use the sr-only-focusable to show an element only while it has focus.

table-{bordered|condensed|hover|striped}

sr-only-focusable

Combine the table-* classes to format your tables.

text-{muted|primary|info|success|warning|danger}

text-{left|center|right|justify|nowrap}

text-{lowercase|uppercase|capitalize}

text-hide

Use text with a selected color to change the color of the text node.

Use text with a selected alignment to change the alignment and/or wrapping property of the text node.

Use text with a case assignment to change the case (capitalization) of the text node.

Use text-hide to replace text with an image.

visible

visible-{xs|sm|md|lg|print}

visible-{xs|sm|md|lg|print}-{inline|inline-block|block}

Use visible and a size to make an element visible and/or at specific sizes and above.

Add inline, inline-block, or block to also set the display attribute.