Tutorials References Menu

Bootstrap CSS Helper Classes Reference


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 (display:block) Try it
.hidden Forces an element to be hidden (display:none) Try it
.invisible Forces an element to be invisible (visibility:hidden). Will take up space on page even though it is invisible 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

Hidden

Hide elements depending on screen size:

Example

<h2>Example</h2>
<p>Resize this page to see how the text below changes:</p>
<h1 class="hidden-xs bg-danger">This text is hidden on an EXTRA SMALL screen.</h1>
<h1 class="hidden-sm bg-info">This text is hidden on a SMALL screen.</h1>
<h1 class="hidden-md bg-warning">This is text hidden on a MEDIUM screen.</h1>
<h1 class="hidden-lg bg-success">This is text hidden on a LARGE screen.</h1>

Result:

Example

Resize this page to see how the text below changes:

This text is hidden on an EXTRA SMALL screen.

This text is hidden on a SMALL screen.

This is text hidden on a MEDIUM screen.

This is text hidden on a LARGE screen.


Try it Yourself »

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 »