Helper Classes

We're sure these will come handy! Small classes to help you organize and format content.

Theme custom text colors

Example

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-color1">...</p>
<p class="text-color2">...</p>
<p class="text-color3">...</p>
<p class="text-color4">...</p>
<p class="text-color5">...</p>
<p class="text-color6">...</p>

Dark/Light text colors

Ideal when you need to "force" black or white text colors.

Example

Dark Text: Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Light text: Nullam id dolor id nibh ultricies vehicula ut id elit.

<p class="text-dark">...</p>
<p class="text-light">...</p>

Contextual text colors

Example

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">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

Theme custom backgrounds

Example

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="bg-color1">...</p>
<p class="bg-color2">...</p>
<p class="bg-color3">...</p>
<p class="bg-color4">...</p>
<p class="bg-color5">...</p>
<p class="bg-color6">...</p>

Contextual backgrounds

Example

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>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

Close icon

×

<a class="close">&times;</a>

Carets

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

Quick floats

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

Absolutely align content blocks

Easily absolutely align an element relative to its container element, by using classes halign-abs, valign-abs and align-abs. Make sure to add align-block to its wrapping element.

	<div class="align-block">
	  <div class="halign-abs">
	    ...
	  </div>
	</div>

	<div class="align-block">
	  <div class="valign-abs">
	    ...
	  </div>
	</div>

	<div class="align-block">
	  <div class="align-abs">
	    ...
	  </div>
	</div>

Center content blocks

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

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

Clearfix

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

<div class="clearfix">...</div>

Showing and hiding content

Force an element to be shown or hidden (including for screen readers) with the use of .show and .hidden classes. These classes use !important to avoid specificity conflicts, just like the quick floats. They are only available for block level toggling.

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