9 Example(s) of Bootstrap CSS Helpers


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.


Bootstrap CSS Helpers Example - 1
<!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>

Output

Description :

.bg-primary,.bg-success,.bg-warning,.bg-danger,.bg-info classes are used to give different colours to the backgorunds.


Bootstrap CSS Helpers Example - 2
<!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>

Output

Description :

.pull-right,.pull-left,.center-block classes used to give position to an element.


Bootstrap CSS Helpers Example - 3
<!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>

Output

Description :

.clearfix class is used to clear the floats.Resize the browser to see the effect of clearfix.


Bootstrap CSS Helpers Example - 4
<!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>

Output

Description :

.show,.hidden classes are used to show and hide the paragraph text.


Bootstrap CSS Helpers Example - 5
<!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>

Output

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.


Bootstrap CSS Helpers Example - 6
<!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>

Output

Description :

.close class is used to make a close button.aria-label attribute is set to close for screen readers devices.


Bootstrap CSS Helpers Example - 7
<!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">&times;</button><!--&times; is a HTML entity used to make a close button rather than using "X".-->
    </div>
</body>
</html>

Output

Description :

The .text-only class replaces an element's text content with a background image and .text-hide makes the text hidden.


Bootstrap CSS Helpers Example - 8
<!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>

Output

Description :

  • .caret class indicates dropdown functionality and direction.
  • .caret class used on a button.


Bootstrap CSS Helpers Example - 9
<!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>

Output