Bootstrap - Helper
Classes
This chapter discusses some of the helper classes in
Bootstrap that might come in handy.
Close icon
Use the generic close icon for dismissing content like
modals and alerts. Use the class close to get the close icon.
<p>Close Icon Example
<button type =
"button" class = "close" aria-hidden = "true">
×
</button>
</p>
Carets
Use carets to indicate dropdown functionality and
direction. To get this functionality use the class caret with
a <span> element.
<p>Caret Example<span class =
"caret"></span></p>
Quick Floats
You can float an element to the left or right with
class pull-left or pull-rightrespectively the
following example demonstrates this.
<div class =
"pull-left">Quick Float to left</div>
<div class =
"pull-right">Quick Float to right</div>
To align
components in navbars with utility classes, use .navbar-left or.navbar-right instead.
See the navbar chapter for details.
Center Content Blocks
Use class center-block to set an
element to center.
<div class = "row">
<div class =
"center-block" style = "width:200px;
background-color:#ccc;">
This is
an example for center-block
</div>
</div>
Clearfix
To clear the float of any element, use the .clearfix class.
<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>
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.
<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>
Screen Reader Content
You can hide an element to all devices except screen
readers with the class .sr-only.
<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>
Here we can see that the label of both the input types
is assigned the class sr-only, hence labels will be visible to only
screen readers.