Utilities

Clearfix

Easily clear floats by adding .clearfix to the parent element. Can also be used as a mixin.

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

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

<div class="display-block">...</div>
<div class="display-inline-block">...</div>
<div class="display-inline">...</div>
<div class="display-none">...</div>
Resets

Use reset classes to remove border, shadow from elements.

<!-- Border reset -->
<div class="no-border">...</div>
<div class="no-border-top">...</div>
<div class="no-border-bottom">...</div>
<div class="no-border-left">...</div>
<div class="no-border-right">...</div>

<!-- Box-shadow reset -->
<div class="no-shadow">...</div>

<!-- Border-radius reset -->
<div class="no-radius">...</div>
Margin & Padding

You can use helper classes to set padding or margin between elements by adding .type-position-* class. The type can be p or m just like padding or margin.

<!-- Margin -->
<div class="m-t-*">...</div>
<div class="m-b-*">...</div>
<div class="m-l-*">...</div>
<div class="m-r-*">...</div>
<div class="m-a-*">...</div>
<div class="m-x-*">...</div>
<div class="m-y-*">...</div>

<!-- Padding -->
<div class="p-t-*">...</div>
<div class="p-b-*">...</div>
<div class="p-l-*">...</div>
<div class="p-r-*">...</div>
<div class="p-a-*">...</div>
<div class="p-x-*">...</div>
<div class="p-y-*">...</div>

<!-- Example -->
<div class="p-t-35">...</div>
<div class="m-t-20 m-b-35">...</div>
<div class="p-a-0">...</div>
Responsive Utilities

For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Learn more at Bootstrap

<div class="hidden-xs-down">...</div>
<div class="hidden-sm-down">...</div>
<div class="hidden-md-down">...</div>
<div class="hidden-lg-down">...</div>
<div class="hidden-xl-down">...</div>
<div class="hidden-xs-up">...</div>
<div class="hidden-sm-up">...</div>
<div class="hidden-md-up">...</div>
<div class="hidden-lg-up">...</div>
<div class="hidden-xl-up">...</div>
Text 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.

Muted text Primary text Success text Info text Warning text Danger text
<span class="text-muted">Muted text</span>
<span class="text-primary">Primary text</span>
<span class="text-success">Success text</span>
<span class="text-info">Info text</span>
<span class="text-warning">Warning text</span>
<span class="text-danger">Danger text</span>
Background Colors

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.

Background Primary Background Success Background Info Background Warning Background Danger Background Inverse