Bootstrap helper classes

This article 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.

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <p>Close Icon Example
   <button type="button" class="close" aria-hidden="true">
      ×
   </button>
</p>
  </body>

</html> 

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

<!DOCTYPE html>
<html>

  <head>
    <title>Try Bootstrap Online</title>
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
  </head>

  <body>
   <div class="pull-left">
   Quick Float to left
</div>
<div class="pull-right">
   Quick Float to right
</div>
  </body>

</html> 

Center content blocks
Use class center-block to set an element to center.

<!DOCTYPE html>
<html>

  <head>
    <title>Try Bootstrap Online</title>
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
  </head>

  <body>
   <div class="row">
   <div class="center-block" style="width:200px;background-color:#ccc;">
      This is an example for center-block
   </div>
</div>
  </body>

</html> 

Clearfix
To clear the float of any element, use the .clearfix class.

<!DOCTYPE html>
<html>
  <head>
    <title>Try Bootstrap Online</title>
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
  </head>
  <body>
  <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>
  </body>
</html> 

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.

<!DOCTYPE html>
<html>
  <head>
    <title>Try Bootstrap Online</title>
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
  </head>
  <body>
  <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>
  </body>
</html> 

Screen reader content
You can hide an element to all devices except screen readers with class .sr-only.

<!DOCTYPE html>
<html>
  <head>
    <title>Try Bootstrap Online</title>
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
  </head>
  <body>
  <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>
  </body>
</html> 

Carets
Use carets to indicate dropdown functionality and direction. To get this functionality use the class caret with a <span> element.

<!DOCTYPE html>
<html>

  <head>
    <title>Try Bootstrap Online</title>
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
  </head>
  <body>
    <p>Caret Example
         <span class="caret"></span>
    </p>
  </body>
</html> 

If you find this article helpful, you can connect us in Google+ and Twitter.

Enter your email address: Delivered by FeedBurner

Leave a Reply

Your email address will not be published. Required fields are marked *