Helper Classes

Close icon

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

×

<button type="button" class="close" aria-hidden="true">&times;</button>

Carets

Use carets to indicate dropdown functionality and direction. Note that the default caret will reverse automatically in dropup menus.

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

Quick floats

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

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

Center content blocks

Set an element to display: block and center via margin. Like this demo box.

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

Clearfix

Clear the float on any element with the .clearfix class.

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

Showing and hiding content

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

Smooth Scolling

<a href="#target" class="scroll-smooth">...</a>

Full panel

Use on element inside .panel-body to match the width of the panel

<div class="full-line">...</div>

Background colors helper

• .bg-primary
• .bg-success
• .bg-info
• .bg-warning
• .bg-danger

<!-- support theme class -->
<div class="bg-primary">...</div>
<div class="bg-success">...</div>
<div class="bg-info">...</div>
<div class="bg-warning">...</div>
<div class="bg-danger">...</div>

<!-- also available generic classes -->
<div class="bg-turquoise">...</div>
<div class="bg-greensea">...</div>
<div class="bg-sunflower">...</div>
<div class="bg-orange">...</div>
<div class="bg-emerald">...</div>
<div class="bg-nephritis">...</div>
<div class="bg-carrot">...</div>
<div class="bg-pumpkin">...</div>
<div class="bg-peterriver">...</div>
<div class="bg-belizehole">...</div>
<div class="bg-alizarin">...</div>
<div class="bg-pomegranate">...</div>
<div class="bg-amethyst">...</div>
<div class="bg-wisteria">...</div>
<div class="bg-cloud">...</div>
<div class="bg-silver">...</div>
<div class="bg-wetasphalt">...</div>
<div class="bg-midnightblue">...</div>
<div class="bg-concrete">...</div>
<div class="bg-asbestos">...</div>

<div class="bg-none">...</div>
<div class="bg-white">...</div>