Bootstrap Helper Classes, Full details of Bootstrap Helper Classes

Bootstrap Tutorial

Bootstrap Helper Classes

The bootstrap helper classes are so many categories there are following :

Contextual colors

The bootstrap contextual color classes are .text-success, .text-info, .textp-primary, .text-danger, .text-warning etc.

<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Contextual Colors</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<p class="text-muted"> 
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
</p>
<p class="text-primary"> 
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
</p>
<p class="text-success"> 
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
</p>
<p class="text-info"> 
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
</p>
<p class="text-warning"> 
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
</p>
<p class="text-danger"> 
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
</p>
 
</body>
</html>

Output :

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Contextual Backgrounds

Similar to the contextual text color classes, easily set the background of an element to any contextual class.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Contextual backgrounds</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<p class="bg-muted"> 
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
</p>
<p class="bg-primary"> 
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
</p>
<p class="bg-success"> 
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
</p>
<p class="bg-info"> 
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
</p>
<p class="bg-warning"> 
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
</p>
<p class="bg-danger"> 
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
</p>
 
</body>
</html>

Output :

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Close icon

close icon for dismissing content like modals and alerts.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Close Icon</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="alert alert-danger">
    <a href="#" class="close" data-dismiss="alert">&times;</a>
    <strong>Danger!</strong> This is sample closing icon.
</div>
 
</body>
</html>

Output :

× Danger! This is sample closing icon.

Carets Icon

The direction of the caret icon will reverse automatically in dropup menus.

<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Caret Icon</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<p>Caret icon <span class="caret"></span></p>
 
</body>
</html>

Output :

Caret icon

Quick floats

Float an element to the left or right with a class. !important is included to avoid specificity issues. Classes can also be used as mixins.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Quick Floats</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<style type="text/css">
.main_qf_border{
     margin: 20px;
   }
.pull-left, .pull-right{
        padding:10px;
        background: #0099da;
        color:#FFF;
   }
</style>
<body>
 
<div class="main_qf_border">
 
    <div class="pull-left">
    <strong>Float to left</strong>
    </div>
     
    <div class="pull-right">
    <strong>Float to right</strong>
    </div>
 
</div>
 
</body>
</html>

Output :

Float to left

Float to right

Center Content Blocks

The Bootstrap class .center-block to align the content block horizontally center.

<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Center Content Blocks</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="row">
   <div class = "center-block" style="width:25%; background-color:#0099da; padding:10px; color:#FFF;">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
   </div>
</div>
 
</body>
</html>

Output :

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Clearfix

Use the .clearfix class to clear the float of any element,

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Clearfix</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
 <div class="clearfix" style ="background:#603; border:1px solid #606; padding:15px;">
   
   <div class="pull-left" style="background:#0099da;">
      Sample Text - 1
   </div>
   
   <div class="pull-right" style="background:#F60;">
      Sample Text - 2
   </div>
   
</div>
 
</body>
</html>

Output :

Sample Text - 1

Sample Text - 2

Showing and Hiding Content

You can force an element to be shown or hidden on all the devices using the .show and .hidden classes.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Showing and Hiding Content</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
 <div class="row">
   
   <div class="show" style="left-margin:10px; width:40%; background-color:#0099da; padding:15px;">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
   </div>
   
   <div class="hidden" style="width:40%; background-color:#0099da; padding:15px;">
     Lorem Ipsum is simply dummy text of the printing and typesetting industry.
   </div>
   
</div>
 
</body>
</html>

Output :

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Screen Readers

Screen readers .sr-only class hides an element to all devices except screen readers.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
   <title>Screen Readers</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <script type="text/javascript" src="js/jquery.min.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
 
 <div class="row" style="padding:15px;">
   
   <p>This paragraph is visible to all devices.</p>
   <p class="sr-only">This paragraph is only visible to screen readers.</p>
   
</div>
 
</body>
</html>

Output :

This paragraph is visible to all devices.

Bootstrap Tutorial

S/W RELATED LINKS

Practice Templates
Practice(PHP) Projects
Quiz (OR) MCQ
Interview Questions
- Computer Science
- Civil Engineering

COMPETITIVE EXAMS