Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Bootstrap Helper Class

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 578
    Comment on it

    Helper Classes are those classes , which is used to perform operations and make the code reusable.

    Some of the Helper Class used in bootstrap are :-

    1. Close Icon :- Bootstrap gives a general close symbol that can be utilized for releasing modals and alerts.

    <div class="alert alert-warning">
        <a href="#" class="close" data-dismiss="alert">&times;</a>
        <strong>Warning!</strong> There was a problem with your network. Try Again.
    </div>
    

    https://jsfiddle.net/s0s50h7y/

    2. Caret Icon :- Bootstrap provides a general caret icon to indicate the dropdown functionality and direction.

    <div class="bs-example">
        <ul class="nav nav-pills">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li class="dropdown">
                <a href="#" data-toggle="dropdown" class="dropdown-toggle">Services <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Design</a></li>
                    <li><a href="#">Development</a></li>
                </ul>
            </li>
        </ul>
    </div>

    https://jsfiddle.net/vq0g8gvg/

    3. Quick Floats :- Used to float an element to the left or right using .pull-left and .pull-right classes. These classes included the CSS !important declaration to avoid specificity issues.

    <div class="bs-example">
        <div class="pull-left">Floated to left.</div>
    	<div class="pull-right">Floated to right.</div>
    </div>

    https://jsfiddle.net/vq0g8gvg/2/

    4.  Clearfix :- This class is used to clear the float of an element. 

    <div class="wrapper clearfix">
        <div class="pull-left">Float to left</div>
        <div class="pull-right">Float to right</div>
    </div>

    https://jsfiddle.net/vq0g8gvg/4/

    5. Center Alignment of Content Blocks :- You can use the class .center-block to align the content block horizontally center

    <div class="wrapper">
       <div class="center-block">Center Aligned DIV Box</div>
    </div>

    https://jsfiddle.net/vq0g8gvg/5/

     

     

     

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: