Blog

In this guide, we will discuss Helper Classes in Bootstrap. 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>

Close Icon Example

Carets

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

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

Caret Example

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>

Quick Float to left Quick Float to right

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.

This is an example for center-block

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>

Quick Float to leftQuick Float to right

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>

This is an example for show class

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.

Next Topic : Click Here