Here we are showing some of the helper classes used in bootstrap

Objectives and Outcomes

Bootstrap provides a handful of CSS classes for common usages.

Backgrounds

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

Code

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

Important: Please read the instructions carefully before proceeding.

Success: Your message has been sent successfully.

Note: You must agree with the terms and conditions to complete the sign up process.

Warning: There was a problem with your network connection.

Error: An error has been occurred while submitting your data.






Close icon

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

Code

<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>
× Warning! There was a problem with your network connection.


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.

Code

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


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.

Code

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


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.

Code

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


sr-only

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

Code

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

This paragraph is visible to all devices.

This paragraph is only visible to screen readers.