Bootstrap Helper Classes

Bootstrap helper classes that might come in handy. This tutorial about helper classes we will briefly discuss here.

Contextual colors

Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.

Contextual backgrounds

Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.

Close icon

Use the generic close icon for dismissing content like modals and alerts. Apply the .close class to get the close icon.


Use carets to indicate dropdown functionality and direction. Note that the default caret will reverse automatically in dropup menus. To get this functionality use the class .caret with a <span> tag.

Quick floats

Any element can be float to the left or right with class pull-left or pull-right respectively.

To align components in navbars with utility classes, use .navbar-left or .navbar-right instead. See the navbar tutorials for details.

Center content blocks

Apply .center-block class to set an element to center.


Use the .clearfix class to clear the float of any element,

Showing and hiding content

You can force an element to be shown or hidden (including for screen readers) with the use of classes .show and .hidden. These classes use !important to apply forcefully this style on any element.

Screen reader content

You can hide an element to all devices except screen readers with class .sr-only.

The class .sr-only is assigned on the label of both the input types, and so labels will be display to only screen readers.

Leave a Reply

Your email address will not be published. Required fields are marked *