Bootstrap | Helper Classes

Hello folks! welcome back to a new section of our tutorial on Bootstrap. In this tutorial, we are going to be discussing about some of the helper classes in Bootstrap.

Close Icon

Use the close icon for removing content like modals and alerts. In order to get the close icon, use the close class.

Example

Following is a simple example -

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

Output

When the above example is executed, it will produce the following result -

Close Icon Example
  

Carets

Make use of carets for indicating dropdown functionality and direction. Make use of the class caret with a <span> element in order to get the functionality.

Example

Following is a simple example -

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

Output

When the above example is executed, it will produce the following result -

Caret Example

READ: Bootstrap | Images

Quick Floats

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

Example

Following below is a simple example -

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

Output

When the above example is executed, it will produce the following result -

Quick Float to left
  

Center Content Blocks

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

Example

Following below is a simple example -

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

Output

When the above example is executed, it will produce the following result -

This is an example for center-block

Clearfix

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

Example

Following below is a simple example -

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

Output

When the above example is executed, it will produce the following result -

Quick Float to left

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.

Example

Following below is a simple example -

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

Output

When the above example is executed, it will produce the following result -

This is an example for show class

Screen Reader Content

With class .sr-only, you can hide an element to all devices except screen readers.

Example

Following below is a simple example -

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

READ: Bootstrap | Forms

Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial guide, we are going to be studying about the Bootstrap Responsive utilities.

Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.