Bootstrap Helper Classes

Advertisements


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">
      &times;
   </button>
</p>
Close Icon Demo

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

Quick floats

You can float an element to the left or right with class pull-left or pull-right respectively. Following example demonstrates this.

<div class="pull-left">
   Quick Float to left
</div>
<div class="pull-right">
   Quick Float to right
</div>
Quick Float Demo
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>
Center Content Block Demo

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

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>
Show Hide Content Demo

Screen reader content

You can hide an element to all devices except screen readers with 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>
</div>
Screen reader Demo

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.



Advertisements
Advertisements