Bootstrap - Helper Classes
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-right respectively 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>