Bootstrap - Helper Classes

This chapter discusses some of the helper classes in Bootstrap that might come in handy.

Close icon

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

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

Carets

Use carets to indicate dropdown functionality and direction. To get this functionality use the class caret with a <span> element.

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

Quick Floats

You can float an element to the left or right with class pull-left or pull-right respectively the following example demonstrates this.

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

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

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

Center Content Blocks

Use class center-block 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>

Clearfix

To clear the float of any element, use the .clearfix class.

<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>

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.

<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>

Screen Reader Content

You can hide an element to all devices except screen readers with the 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>
      
   </form>
</div>

Here we can see that the label of both the input types is assigned the class sr-only, hence labels will be visible to only screen readers.