Bootstrap Helper Classes

In this tutorial you will learn about the Bootstrap helper classes.

Bootstrap Helper Classes

Bootstrap provides a handful of CSS classes for common usages.

Contextual Colors

You can use the contextual color classes like .text-success, .text-info, .text-warning etc. to emphasize the text. See the tutorial on Bootstrap typography for more detail.


Contextual Backgrounds

Similar to the contextual text color classes, you can use the contextual background color classes to set the background-color of an element to apply extra emphasis on them.

  • <p class="bg-primary">Important: Please read the instructions carefully before proceeding.</p>
  • <p class="bg-success">Success: Your message has been sent successfully.</p>
  • <p class="bg-info">Note: You must agree with the terms and conditions to complete the sign up process.</p>
  • <p class="bg-warning">Warning: There was a problem with your network connection.</p>
  • <p class="bg-danger">Error: An error has been occurred while submitting your data.</p>

— The output of the above example will look something like this:

 

Note:The contextual background classes only apply the CSS background-color property on the element. To adjust the space between content and border-box you have to set the CSS padding property yourself.


Close Icon

Bootstrap provides a generic close icon that can be used for dismissing modals and alerts.

  • <div class="alert alert-warning">
  •     <a href="#" class="close" data-dismiss="alert">&times;</a>
  •     <strong>Warning!</strong> There was a problem with your network connection.
  • </div>

— The output of the above example will look something like this:


Caret Icon

Bootstrap provides a generic caret icon to indicate the dropdown functionality. The direction of the caret icon will reverse automatically in dropup menus.

  • <ul class="nav nav-pills">
  •     <li class="active"><a href="#">Home</a></li>
  •     <li><a href="#">About</a></li>
  •     <li class="dropdown">
  •         <a href="#" data-toggle="dropdown" class="dropdown-toggle">Services <span class="caret"></span></a>
  •         <ul class="dropdown-menu">
  •             <li><a href="#">Design</a></li>
  •             <li><a href="#">Development</a></li>
  •         </ul>
  •     </li>
  • </ul>

— The output of the above example will look something like this:


Center Alignment of Content Blocks

You can use the Bootstrap class .center-block to align the content block horizontally center. However, to see the effect of this class you have to set the width of the content block yourself and it should be less than the containing parent element.

  • <div class="wrapper">
  •    <div class="center-block">Center Aligned DIV Box</div>
  • </div>

See the tutorial on CSS alignment to learn more about aligning the elements.


Quick Floats

You can quickly float an element to the left or right using the .pull-left and .pull-right classes. These classes included the CSS !important declaration to avoid specificity issues.

  • <div class="pull-left">Floated to left.</div>
  • <div class="pull-right">Floated to right.</div>

Clearfix

The .clearfix class clears the float on any element. This class is widely used for fixing the collapsing parent issue, where parent element contains floated boxes.

  • <div class="wrapper clearfix">
  •    <div class="pull-left">Float to left</div>
  •    <div class="pull-right">Float to right</div>
  • </div>

See the tutorial on CSS alignment to learn more about clearing floats on an element.


Showing and Hiding Content

You can force an element to be shown or hidden on all the devices using the .show and .hidden classes. These classes also included the CSS !important declaration to avoid specificity conflicts, just like the quick floats.

Furthermore, you can use the class .invisible to toggle only the visibility of an element; however the element still occupies the space in the layout.

  • <div class="show">This is visible to the user.</div>
  • <div class="hidden">This is not visible to the user.</div>
  • <div class="invisible">This is not visible but affects the layout.</div>

Content Specific to Screen Readers

The special .sr-only class hides an element to all devices except screen readers.

  • <p>This paragraph is visible to all devices.</p>
  • <p class="sr-only">This paragraph is only visible to screen readers.</p>

Hide Text Only

You can use the class .text-hide to hide the text content of an element.

  • <h1 class="text-hide">The text of this heading is not visible</h1>
  • <p class="text-hide">The text of this paragraph is not visible.</p>
 

Warning:Think twice before using this class, because it uses the color: transparent and font-size: 0px to hide the text. Search engines consider such techniques as spam that may result in penalty.

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.