Description :
.text-muted,.text-primary,.text-success,.text-info,.text-warning,.text-danger classes are used to give different colours to the text of paragraphs.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bootstrap css helpers Example</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Text</h2>
<p class="text-muted well">Muted styled text.</p>
<p class="text-warning well">warning styled text.</p>
<p class="text-success well">success styled text.</p>
<p class="text-info well">info styled text.</p>
<p class="text-danger well">danger styled text.</p>
<p class="text-primary well">primary styled text.</p>
</div>
</body>
</html>
Description :
.bg-primary,.bg-success,.bg-warning,.bg-danger,.bg-info classes are used to give different colours to the backgorunds.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bootstrap css helpers Example</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Background colour</h2>
<p class="bg-primary">Background is in primary style.</p>
<p class="bg-success">Background is in success style.</p>
<p class="bg-warning">Background is in warning style.</p>
<p class="bg-danger">Background is in danger style.</p>
<p class="bg-info">Background is in info style.</p>
</div>
</body>
</html>
Description :
.pull-right,.pull-left,.center-block classes used to give position to an element.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bootstrap css helpers Example</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Pull Classses</h2>
<div class="pull-left" style="background-color:gray;width:200px;">element at left</div>
<div class="pull-right" style="background-color:lavender;width:200px;">element at right</div>
<div class="center-block" style="background-color:yellow;width:200px;">element at centre</div>
</div>
</body>
</html>
Description :
.clearfix class is used to clear the floats.Resize the browser to see the effect of clearfix.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bootstrap css helpers Example</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-sm-3" style="background-color:yellow;">
Column 1<br>
Resize the browser window to see the effect. Also try to remove the div clearfix line and see what happens.
</div>
<div class="col-xs-6 col-sm-3" style="background-color:greenyellow;">Column 2</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3" style="background-color:lightcyan;">Column 3</div>
<div class="col-xs-6 col-sm-3" style="background-color:lavender;">Column 4</div>
</div>
</div>
</body>
</html>
Description :
.show,.hidden classes are used to show and hide the paragraph text.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bootstrap css helpers Example</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="well">
<p>The .show class forces an element to be shown:</p>
<p class="show">This paragraph is forced to be shown.</p>
<p>The .hidden class forces an element to be hidden:</p>
<p class="hidden">This paragraph is forced to be hidden.</p>
</div>
</div>
</body>
</html>
Description :
.sr-onlyclass is used in anchor tag which is only readeable by the screen reader devices.screen reader device are so usefull for blind peoples.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bootstrap css helpers Example</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Example</h2>
<button class="btn btn-primary">Hello.</button>
<a class="sr-only" href="#">sr-only text.</a>
<button class="btn btn-info">fine.</button>
</div>
</body>
</html>
Description :
.close class is used to make a close button.aria-label attribute is set to close for screen readers devices.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bootstrap css helpers Example</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<button type="button" class="close" aria-label="close">×</button><!--× is a HTML entity used to make a close button rather than using "X".-->
</div>
</body>
</html>
Description :
The .text-only class replaces an element's text content with a background image and .text-hide makes the text hidden.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bootstrap css helpers Example</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="text-hide">Some text inside first div element.</div>
<div class="text-only">Some text inside second div element.</div>
</div>
</body>
</html>
Description :
.caret class indicates dropdown functionality and direction..caret class used on a button.<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Caret</h2>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Links<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
</ul>
</div>
</div>
</body>
</html>