Bootstrap Helper Classes
This chapter will discuss some helper classes in Bootstrap that might come in handy.
Text
The following different classes display different text colors. If the text is a link, it will darken when the mouse moves over it:
| Class | Description | Example |
|---|---|---|
| .text-muted | Text style for "text-muted" class | Try it |
| .text-primary | Text style for "text-primary" class | Try it |
| .text-success | Text style for "text-success" class | Try it |
| .text-info | Text style for "text-info" class | Try it |
| .text-warning | Text style for "text-warning" class | Try it |
| .text-danger | Text style for "text-danger" class | Try it |
Background
The following different classes display different background colors. If the text is a link, it will darken when the mouse moves over it:
| Class | Description | Example |
|---|---|---|
| .bg-primary | Table cell using "bg-primary" class | Try it |
| .bg-success | Table cell using "bg-success" class | Try it |
| .bg-info | Table cell using "bg-info" class | Try it |
| .bg-warning | Table cell using "bg-warning" class | Try it |
| .bg-danger | Table cell using "bg-danger" class | Try it |
Other
| Class | Description | Example |
|---|---|---|
| .pull-left | Element floats to the left | Try it |
| .pull-right | Element floats to the right | Try it |
| .center-block | Sets element to display:block and centers it | Try it |
| .clearfix | Clears floats | Try it |
| .show | Forces element to be shown | Try it |
| .hidden | Forces element to be hidden | Try it |
| .sr-only | Hides element on all devices except screen readers | Try it |
| .sr-only-focusable | Used in conjunction with the .sr-only class, it makes the element visible when it gains focus (e.g., for users operating with a keyboard) | Try it |
| .text-hide | Replaces the text content of a page element with a background image | Try it |
| .close | Displays a close button | Try it |
| .caret | Displays a dropdown function | Try it |
More Examples
Close Icon
Use a generic close icon to dismiss modal dialogs and alert boxes. Use the class close to get the close icon.
Example
<p>Close icon example
<button type="button" class="close" aria-hidden="true">
×
</button>
</p>
The result is as follows:
>
aria-hidden="true" is primarily to assist disabled individuals (such as the visually impaired) using reading devices (which automatically read the content and play it out loud). When the device encounters content with this attribute, it skips it to prevent confusion for the disabled person!
Caret
Use a caret to indicate dropdown functionality and direction. Use a <span> element with the class caret to achieve this.
Example
<p>Caret example
<span class="caret"></span>
</p>
The result is as follows:
Quick Float
You can float elements to the left or right using the class pull-left or pull-right. The following example demonstrates this.
Example
<div class="pull-left">
Float left quickly
</div>
<div class="pull-right">
Float right quickly
</div>
The result is as follows:
To align components in a navigation bar, use .navbar-left or .navbar-right instead. See Bootstrap Navbar.
Center Content
Use the class center-block to center an element.
Example
<div class="row">
<div class="center-block" style="width:200px;background-color:#ccc;">
This is a center-block example
</div>
</div>
The result is as follows:
Clear Float
To clear the float of an element, use the .clearfix class.
Example
<div class="clearfix" style="background: #D8D8D8;border: 1px solid #000;padding: 10px;">
<div class="pull-left" style="background:#58D3F7;">
Float left quickly
</div>
<div class="pull-right" style="background: #DA81F5;">
Float right quickly
</div>
</div>
The result is as follows:
Show and Hide Content
You can force an element to be shown or hidden (including screen readers) by using the classes .show and .hidden.
Example
<div class="row" style="padding: 91px 100px 19px 50px;">
<div class="show" style="margin-left:10px;width:300px;background-color:#ccc;">
This is a show class example
</div>
<div class="hidden" style="width:200px;background-color:#ccc;">
This is a hide class example
</div>
</div>
The result is as follows:
Screen Reader
You can hide an element from all devices except screen readers by using the class .sr-only.
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>