Text
Add meaning through text-colors with the classes below. Links will darken on hover:
| Class | Description | Example |
|---|---|---|
| .text-muted | Text styled with class "text-muted" | Try it |
| .text-primary | Text styled with class "text-primary" | Try it |
| .text-success | Text styled with class "text-success" | Try it |
| .text-info | Text styled with class "text-info" | Try it |
| .text-warning | Text styled with class "text-warning" | Try it |
| .text-danger | Text styled with class "text-danger" | Try it |
Background
Add meaning through background-colors with the classes below. Links will darken on hover just like text classes:
| Class | Description | Example |
|---|---|---|
| .bg-primary | Table cell is styled with class "bg-primary" | Try it |
| .bg-success | Table cell is styled with class "bg-success" | Try it |
| .bg-info | Table cell is styled with class "bg-info" | Try it |
| .bg-warning | Table cell is styled with class "bg-warning" | Try it |
| .bg-danger | Table cell is styled with class "bg-danger" | Try it |
Other
| Class | Description | Example |
|---|---|---|
| .pull-left | Floats an element to the left | Try it |
| .pull-right | Floats an element to the right | Try it |
| .center-block | Sets an element to display:block with margin-right:auto and margin-left:auto | Try it |
| .clearfix | Clears floats | Try it |
| .show | Forces an element to be shown | Try it |
| .hidden | Forces an element to be hidden | Try it |
| .sr-only | Hides an element to all devices except screen readers | Try it |
| .sr-only-focusable | Combine with .sr-only to show the element again when it is focused (e.g. by a keyboard-only user) | Try it |
| .text-hide | Helps replace an element's text content with a background image | Try it |
| .close | Indicates a close icon | Try it |
| .caret | Indicates dropdown functionality (will reverse automatically in dropup menus) | Try it |
Responsive Utilities
These classes are used to show and/or hide content by device via media queries.
Use one or a combination of the available classes for toggling content across viewport breakpoints:
| Classes | Extra small devices Phones (<768px) | Small devices Tablets (≥768px) | Medium devices Desktops (≥992px) | Large devices Desktops (≥1200px) |
|---|---|---|---|---|
| .visible-xs-* | Visible | Hidden | Hidden | Hidden |
| .visible-sm-* | Hidden | Visible | Hidden | Hidden |
| .visible-md-* | Hidden | Hidden | Visible | Hidden |
| .visible-lg-* | Hidden | Hidden | Hidden | Visible |
| .hidden-xs | Hidden | Visible | Visible | Visible |
| .hidden-sm | Visible | Hidden | Visible | Visible |
| .hidden-md | Visible | Visible | Hidden | Visible |
| .hidden-lg | Visible | Visible | Visible | Hidden |
As of v3.2.0, the .visible-*-* classes for come in three variations, one for each CSS display
property value:
| Group of classes | CSS display |
|---|---|
| visible-*-block | display: block; |
| .visible-*-inline | display: inline; |
| .visible-*-inline-block | display: inline-block; |
E.g. for small (sm) screens, the available .visible-*-* classes are: .visible-sm-block, .visible-sm-inline, and .visible-sm-inline-block.
The classes .visible-xs, .visible-sm, .visible-md, and .visible-lg are deprecated as of v3.2.0.
Example
<h2>Example</h2>
<p>Resize this page to see how the text below
changes:</p>
<h1 class="visible-xs">This text is shown only on an EXTRA
SMALL screen.</h1>
<h1 class="visible-sm">This text is shown only on a
SMALL screen.</h1>
<h1 class="visible-md">This text is shown only on a
MEDIUM screen.</h1>
<h1 class="visible-lg">This text is shown only on a
LARGE screen.</h1>
Result:
Example
Resize this page to see how the text below changes:
This text is shown only on an EXTRA SMALL screen.
This text is shown only on a SMALL screen.
This text is shown only on a MEDIUM screen.
This text is shown only on a LARGE screen.
Try it Yourself »