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">×</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)