---

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 <mark>highlight</mark> text.</p> See Live Example

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> See Live Example

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> See Live Example

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> See Live Example

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> See Live Example

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> See Live Example

---