Bootstrap Helper Classes


Bootstrap provides a bunch of CSS text styling classes for common operation like text hide, text alignment, float text etc.

Bootstrap Close Icon Class

Bootstrap provides a generic close icon button that can be used for dismissal of modals and alerts.

<p>Mark element is used to highlight text.</p>
Try Now

The above code example will produce below output:


Bootstrap Caret Icon Class

Bootstrap provides a generic caret icon button that indicates the dropdown. The direction of the caret icon button will reverse automatically.

<ul class="nav nav-pills">
<li><a href="#">Home</a></li>
<li class="dropdown active">
	<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>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact Us</a></li>
</ul>
Try Now

The above code example will produce below output:


Bootstrap Center Alignment of Content Blocks Class

Bootstrap provides a class like .center-block that can be used to align the content block horizontally center.

<div class="wrapper">
   <div class="center-block">Bootstrap Center Aligned Box</div>
    <p><b>Note:</b> You can change .center-block value to know more about it.</p>
</div>
Try Now

The above code example will produce below output:


Bootstrap Float Left and Right Classes

Bootstrap provides a classes like .pull-left and .pull-right that can be used to float an element to the left or right side.

<div class="pull-left"><span class="glyphicon glyphicon-arrow-left"
></span> This text will float left side.</div>
<div class="pull-right">This text will float right side 
<span class="glyphicon glyphicon-arrow-right"></span></div>
Try Now

The above code example will produce below output:


Bootstrap Show and Hide Content Classes

Bootstrap provides a classes like .show and .hidden that can be used to show or hide the elements. You can also use .invisible class to hide the element but occupy hidden space for the element.

<div class="show">This is visible to the user.</div>
<div class="hidden">This is not visible to the user.</div>
<div>After hidden text.</div>
<div class="invisible">This is not visible but affects the layout.</div>
<div>After invisible text.</div>
Try Now

The above code example will produce below output:


Bootstrap Hide Text Classes

Bootstrap provides a class like .text-hide that can be used to hide the element text.

<span class="text-hide">This text won't be visible.</span>
<p class="text-hide">This paragraph text won't be visible.</p>
Try Now


See Also

AngularJS Built-in Filters
AngularJS Built-in Directives
AngularJS Expression
AngularJS Built-in Events
AngularJS Scope Methods
AngularJS Built-in Services
AngularJS Controller Inheritance
AngularJS Custom Directives



 
 
SHARE THIS IF YOU LIKE!
submit to reddit

SUBSCRIBE FOR LATEST UPDATES
HAVE WE CONNECTED ON FACEBOOK?
TOP TUTORIALSTOP CODE EXAMPLESTOP LIVE DEMOLINKSSTAY CONNECTED
HTML Tutorial
HTML5 Tutorial
Bootstrap3 Tutorial
Javascript Tutorial
TypeScript Tutorial
AngularJS Tutorial
CSharp Tutorial
PHP Tutorial
Developer Tools
Javascript
AngularJS
Google MAP API V3
ASP.NET
Javascript
AngularJS
Google MAP API V3
Contact Us
Advertise with Us
Privacy Policy
Disclaimer
Stay connected. We actually like you. If you want to get up to the minute updates, then connect with us on your fav below.
 
Twitter   Linkedin   Facebook   Google+    RSS   Pinterest
 
Protected by Copyscape Original Content Checker
 
 
Copyright ©2017 www.techstrikers.com Unauthorized reproduction/replication of any part of this site is prohibited.