< Bootstrap Tutorial

Bootstrap helper classes

← Previous


Bootstrap Helper Classes

Bootstrap provides a handful of CSS classes for common usages. Some of them are discussed here.

Contextual Colors

We can use the contextual color classes like .text-success, .text-info, .text-warning etc. to emphasize the text.

Contextual Backgrounds

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

The following code shows an example:

<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 result will be:

Close Icon

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

The following example demonstrates this:

<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 will be:

Caret Icon

Bootstrap provides a generic caret icon to indicate the dropdown functionality. Use carets to indicate dropdown functionality and direction. To get this functionality use the class caret with a <span> element. The direction of the caret icon will reverse automatically in dropup menus.

The folowing example demonstrates this:

<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 result is:

Quick Floats

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

The following code demonstrates this:

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

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

The result is:

Center Content Blocks

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

The following code demonstrates this:

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

The result is:

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.

The code will be as follows:

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

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, we can use the class .invisible to toggle only the visibility of an element; however the element still occupies the space in the layout.

The following example demonstrates this:

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

The following code shows how it's done:

<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

We can use the class .text-hide to hide the text content of an element as shown in the following example code:

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