Helpers

White Space

Margin and padding utility classes are available to change or reset white space. The scale is based on the following values: 0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 100. Each direction is also available: top, right, bottom, and left.

Margins

/* Direction-specific */
.margin-top-5 {
	margin-top: 5px !important;
}

...

.margin-top-100 {
	margin-top: 100px !important;
}

/* All directions */
.margin-all-5 {
	margin: 5px !important;
}

...

.margin-all-100 {
	margin: 100px !important;
}

/* Horizontal */
.margin-x-5 {
	margin-left: 5px !important;
	margin-right: 5px !important;
}

...

.margin-x-100 {
	margin-left: 100px !important;
	margin-right: 100px !important;
}

/* Vertical */
.margin-y-5 {
	margin-top: 5px !important;
	margin-bottom: 5px !important;
}

...

.margin-y-100 {
	margin-top: 100px !important;
	margin-bottom: 100px !important;
}

Paddings

/* Direction-specific */
.padding-top-5 {
	padding-top: 5px !important;
}

...

.padding-top-100 {
	padding-top: 100px !important;
}

/* All directions */
.padding-all-5 {
	padding: 5px !important;
}

...

.padding-all-100 {
	padding: 100px !important;
}

/* Horizontal */
.padding-x-5 {
	padding-left: 5px !important;
	padding-right: 5px !important;
}

...

.padding-x-100 {
	padding-left: 100px !important;
	padding-right: 100px !important;
}

/* Vertical */
.padding-y-5 {
	padding-top: 5px !important;
	padding-bottom: 5px !important;
}

...

.padding-y-100 {
	padding-top: 100px !important;
	padding-bottom: 100px !important;
}

Remove Spacing

.no-padding {
	padding: 0 !important;
}

.no-margin {
	margin: 0 !important;
}

.no-top-spacing {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

.no-bottom-spacing {
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
}

.no-left-spacing {
	padding-left: 0 !important;
	margin-left: 0 !important;
}

.no-right-spacing {
	padding-right: 0 !important;
	margin-right: 0 !important;
}

.no-side-spacing {
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.no-gutter {
	margin-right: 0 !important;
	margin-left: 0 !important;

	> [class^='col-'],
	> [class*='col-'] {
		padding-right: 0 !important;
		padding-left: 0 !important;
	}
}

.no-border {
	border: 0 !important;
}

Type

Adjust font size, weight, and styles with the following modifier classes.

h1. heading

h2. heading

h3. heading

h4. heading

h5. heading

h6. heading

<p class="h1">h1. heading</p>
<p class="h2">h2. heading</p>
<p class="h3">h3. heading</p>
<p class="h4">h4. heading</p>
<p class="h5">h5. heading</p>
<p class="h6">h6. heading</p>

Bold

Regular

Italic

capitalize

uppercase

letter-spacing

<p class="bold">Bold</p>
<p class="regular">Regular</p>
<p class="italic">Italic</p>
<p class="capitalize">capitalize</p>
<p class="uppercase">uppercase</p>
<p class="letter-spacing">letter-spacing</p>

.font-weight-100

.font-weight-200

.font-weight-300

.font-weight-400

.font-weight-500

.font-weight-600

.font-weight-700

.font-weight-800

.font-weight-900

<p class="font-weight-100">.font-weight-100</p>
<p class="font-weight-200">.font-weight-200</p>
<p class="font-weight-300">.font-weight-300</p>
<p class="font-weight-400">.font-weight-400</p>
<p class="font-weight-500">.font-weight-500</p>
<p class="font-weight-600">.font-weight-600</p>
<p class="font-weight-700">.font-weight-700</p>
<p class="font-weight-800">.font-weight-800</p>
<p class="font-weight-900">.font-weight-900</p>

Links

Directly modify the color of links to change it from the default color.

No modifier
.link-primary
.link-light
.link-dark
.link-white

<a href="#">No modifier</a>
<a href="#" class="link-primary">.link-primary</a>
<a href="#" class="link-light">.link-light</a>
<a href="#" class="link-dark">.link-dark</a>
<a href="#" class="link-white">.link-white</a>

Radius

Add a border radius using the following modifiers.

<i class="fa fa-cloud icon-bg icon-dark rounded"></i>
<i class="fa fa-cloud icon-bg icon-dark rounded-2x"></i>
<i class="fa fa-cloud icon-bg icon-dark circle"></i>

Visibility

Force an element to be shown or hidden with the use of .show and .hidden classes. The .invisible class can 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.

Utilize the .text-hide class or mixin to help replace an element's text content with a background image.

Hide an element to all devices except screen readers with .sr-only. Combine .sr-only with .sr-only-focusable to show the element again when it's focused (e.g. by a keyboard-only user).

<div class="show">...</div>
<div class="hidden">...</div>
<div class="invisible">...</div>
<h1 class="text-hide">Custom heading</h1>
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

Background Positioning

When utilizing background images, you can modify the positioning with the following classes.

<section class="site-content text-center bg-img bg-center-center" style="background-image: url('...');">...</section>
<section class="site-content bg-img bg-center-top" style="background-image: url('...');">...</section>
<section class="site-content bg-img bg-center-bottom" style="background-image: url('...');">...</section>
<section class="site-content bg-img bg-left-center" style="background-image: url('...');">...</section>
<section class="site-content bg-img bg-left-top" style="background-image: url('...');">...</section>
<section class="site-content bg-img bg-left-bottom" style="background-image: url('...');">...</section>
<section class="site-content bg-img bg-right-center" style="background-image: url('...');">...</section>
<section class="site-content bg-img bg-right-top" style="background-image: url('...');">...</section>
<section class="site-content bg-img bg-right-bottom" style="background-image: url('...');">...</section>

<div> Positioning

Float an element to the left or right with either the .pull-left or .pull-right class, respectively. !important is included to avoid specificity issues.

Set an element to display: block and center via margin by using the .center-block class.

Easily clear floats by adding .clearfix to the parent element. Utilizes the micro clearfix as popularized by Nicolas Gallagher.

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

Responsive Utilities

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

Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.

Available classes

Use a single or combination of the available classes for toggling content across viewport breakpoints.