Bootstrap - Helper Classes

We have styled all Bootstrap elements just as you want!

Click me!
Talk to usSettings

Contextual Colors

Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla. 

<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p><p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p><p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p><p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p><p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p><p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>

Contextual Backgrounds

Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla. 

<p class="bg-primary p-10">Nullam id dolor id nibh ultricies vehicula ut id elit.</p><p class="bg-success p-10">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p><p class="bg-info p-10">Maecenas sed diam eget risus varius blandit sit amet non magna.</p><p class="bg-warning p-10">Etiam porta sem malesuada magna mollis euismod.</p><p class="bg-danger p-10">Donec ullamcorper nulla non metus auctor fringilla.</p>

Close Icon

Use the generic close icon for dismissing content like modals and alerts. 


<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>

Carets

Use carets to indicate dropdown functionality and direction. 


<span class="caret"></span>

Quick Floats

Float an element to the left or right with a class. !importantis included to avoid specificity issues. Classes can also be used as mixins. 

<div class="pull-left">...</div> <!-- Float div to left --><div class="pull-right">...</div> <!-- Float div to right -->

Center Content Blocks

Set an element to display: blockand center via margin. Available as a mixin and class. 

<div class="center-block">...</div>

Clearfix

Easily clear floats by adding .clearfixto the parent element. Utilizes the micro clearfix as popularized by Nicolas Gallagher. Can also be used as a mixin. 

<!-- Usage as a class --><div class="clearfix">...</div>

Showing & Hiding Content

Force an element to be shown or hidden (including for screen readers) with the use of .showand .hiddenclasses. These classes use !importantto avoid specificity conflicts, just like the quick floats. They are only available for block level toggling. They can also be used as mixins.

Furthermore, .invisiblecan be used to toggle only the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document. 

<div class="show">...</div><div class="hidden">...</div>

Responsive Images

Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsiveclass. This applies max-width: 100%;, height: auto;and display: block;to the image so that it scales nicely to the parent element.

To center images which use the .img-responsiveclass, use .center-blockinstead of .text-center. 

<img src="..." class="img-responsive" alt="Responsive image">

Image Shapes

Add classes to an <img>element to easily style images in any project.

140x140140x140140x140 
<img src="..." alt="..." class="img-rounded"><img src="..." alt="..." class="img-circle"><img src="..." alt="..." class="img-thumbnail">

Responsive Utilities

For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.

Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px)
.visible-xs-* Visible
.visible-sm-* Visible
.visible-md-* Visible
.visible-lg-* Visible
.hidden-xs Visible Visible Visible
.hidden-sm Visible Visible Visible
.hidden-md Visible Visible Visible
.hidden-lg Visible Visible Visible

Print Classes

For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.

Classes Browser Print
.visible-print-block
.visible-print-inline
.visible-print-inline-block 		Visible
.hidden-print Visible

Useful Sidebar

Code for help is added within the main page. Check for code below the example.

You can use this sidebar to help your end-users. You can enter any HTML in this sidebar.

This sidebar can be a 'fixed to top' or you can unpin it to scroll with main page.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.