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.

<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>

Demo

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.

<p class="bg-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p class="bg-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<p class="bg-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="bg-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="bg-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>

Demo

Close icon

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

<p>Close Icon Example
 <button type="button" class="close" aria-hidden="true">
 &times;
 </button>
</p>

Demo

Carets

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.

<p>Caret Example
 <span class="caret"></span>
</p>

Demo

Quick floats

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

<div class="pull-left">
 Quick Float to left
</div>
<div class="pull-right">
 Quick Float to right
</div>

Demo

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.

<div class="row">
 <div class="center-block" style="width:200px;background-color:#ccc;">
 This is an example for center-block
 </div>
</div>

Demo

Clearfix

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

<div class="clearfix" style="background: #D8D8D8;border: 1px solid #000;padding: 10px;">
 <div class="pull-left" style="background:#58D3F7;">
 Quick Float to left
 </div>
 <div class="pull-right" style="background: #DA81F5;">
 Quick Float to right
 </div>
</div>

Demo

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.

<div class="row" style="padding: 91px 100px 19px 50px;">
 <div class="show" style="left-margin:10px;width:300px;background-color:#ccc;">
 This is an example for show class
 </div>
 <div class="hidden" style="width:200px;background-color:#ccc;">
 This is an example for hide class
 </div>
</div>

Demo

Screen reader content

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

<div class="row" style="padding: 91px 100px 19px 50px;">
 <form class="form-inline" role="form">
 <div class="form-group">
 <label class="sr-only" for="email">Email address</label>
 <input type="email" class="form-control" placeholder="Enter email">
 </div>
 <div class="form-group">
 <label class="sr-only" for="pass">Password</label>
 <input type="password" class="form-control" placeholder="Password">
 </div>
</div>

Demo

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

Bootstrap Helper Classes