Alignment
Easy-to-use classes to help you align your content.
Vertical Align
You can easily vertically center things by adding the class
valign-wrapper to the container holding the items you want to vertically align.
This should be vertically aligned
<div class="valign-wrapper">
<h5>This should be vertically aligned</h5>
</div>Text Align
These classes are for horizontally aligning content:
.left-align, .right-align and .center-align.
This should be left aligned
This should be right aligned
This should be center aligned
<div>
<h5 class="left-align">This should be left aligned</h5>
</div>
<div>
<h5 class="right-align">This should be right aligned</h5>
</div>
<div>
<h5 class="center-align">This should be center aligned</h5>
</div>
To center text on mobile only, add center-on-small-only.
Hiding/Showing Content
We provide easy to use classes to hide/show content on specific screen sizes.
| Class | Screen Range |
|---|---|
.hide |
Hidden for all Devices |
.hide-on-compact-only |
Hidden on Compact (< 600px) |
.hide-on-medium-only |
Hidden on Medium (600–839px) |
.hide-on-expanded-only |
Hidden on Expanded (840–1199px) |
.hide-on-expanded-and-up |
Hidden on Expanded and wider (≥ 840px) |
.hide-on-large-only |
Hidden on Large (1200–1599px) |
.hide-on-extra-large-only |
Hidden on Extra-large (≥ 1600px) |
.show-on-compact |
Shown on Compact (< 600px) |
.show-on-medium |
Shown on Medium (600–839px) |
.show-on-expanded |
Shown on Expanded (840–1199px) |
.show-on-large |
Shown on Large (1200–1599px) |
.show-on-extra-large |
Shown on Extra-large (≥ 1600px) |
.show-on-medium-and-up |
Shown on Medium and wider (≥ 600px) |
.show-on-medium-and-down |
Shown on Compact and Medium (< 840px) |
Legacy small, med, and xxl
utility names remain aliases for compatibility.
Usage
<div class="hide-on-compact-only"></div>Spacing
These classes help space elements with margin and padding helpers for all directions. This works by combining a margin/padding prefix, a direction infix and value suffix.
Prefix margin and padding modifiers
| Prefix | Modifies |
|---|---|
m* |
Modifies the margin according to the infix and suffix values. If no infix is provided, it will be applied to all directions. |
p* |
Modifies the padding according to the infix and suffix values. If no infix is provided, it will be applied to all directions. |
Infix direction modifiers
| Infix | Direction |
|---|---|
*t |
Applies modifier to the top side of the element |
*r |
Applies modifier to the right side of the element |
*b |
Applies modifier to the bottom side of the element |
*l |
Applies modifier to the left side of the element |
*x |
Applies modifier to the left and right sides of the element |
*y |
Applies modifier to the top and bottom sides of the element |
Suffix values
Any margin or padding modifier must be appended with one of these value suffixes.
| Suffix | Value |
|---|---|
*-0 |
0 |
*-1 |
0.25rem |
*-2 |
0.5rem |
*-3 |
0.75rem |
*-4 |
1rem |
*-5 |
1.5rem |
*-6 |
3rem |
*-auto |
auto |
Tables of all spacing helpers
All margin helpers
| Property | Prefix | Classes | |||||||
|---|---|---|---|---|---|---|---|---|---|
margin |
m |
m-0 |
m-1 |
m-2 |
m-3 |
m-4 |
m-5 |
m-6 |
m-auto |
margin-top |
mt |
mt-0 |
mt-1 |
mt-2 |
mt-3 |
mt-4 |
mt-5 |
mt-6 |
mt-auto |
margin-right |
mr |
mr-0 |
mr-1 |
mr-2 |
mr-3 |
mr-4 |
mr-5 |
mr-6 |
mr-auto |
margin-bottom |
mb |
mb-0 |
mb-1 |
mb-2 |
mb-3 |
mb-4 |
mb-5 |
mb-6 |
mb-auto |
margin-left |
ml |
ml-0 |
ml-1 |
ml-2 |
ml-3 |
ml-4 |
ml-5 |
ml-6 |
ml-auto |
margin-top
and
margin-bottom
|
my |
my-0 |
my-1 |
my-2 |
my-3 |
my-4 |
my-5 |
my-6 |
my-auto |
margin-left
and
margin-right
|
mx |
mx-0 |
mx-1 |
mx-2 |
mx-3 |
mx-4 |
mx-5 |
mx-6 |
mx-auto |
| Values | 0 | 0.25rem | 0.5rem | 0.75rem | 1rem | 1.5rem | 3rem | auto | |
All padding helpers
| Property | Prefix | Classes | |||||||
|---|---|---|---|---|---|---|---|---|---|
padding |
p |
p-0 |
p-1 |
p-2 |
p-3 |
p-4 |
p-5 |
p-6 |
p-auto |
padding-top |
pt |
pt-0 |
pt-1 |
pt-2 |
pt-3 |
pt-4 |
pt-5 |
pt-6 |
pt-auto |
padding-right |
pr |
pr-0 |
pr-1 |
pr-2 |
pr-3 |
pr-4 |
pr-5 |
pr-6 |
pr-auto |
padding-bottom |
pb |
pb-0 |
pb-1 |
pb-2 |
pb-3 |
pb-4 |
pb-5 |
pb-6 |
pb-auto |
padding-left |
pl |
pl-0 |
pl-1 |
pl-2 |
pl-3 |
pl-4 |
pl-5 |
pl-6 |
pl-auto |
padding-top
and
padding-bottom
|
py |
py-0 |
py-1 |
py-2 |
py-3 |
py-4 |
py-5 |
py-6 |
py-auto |
padding-left
and
padding-right
|
px |
px-0 |
px-1 |
px-2 |
px-3 |
px-4 |
px-5 |
px-6 |
px-auto |
| Values | 0 | 0.25rem | 0.5rem | 0.75rem | 1rem | 1.5rem | 3rem | auto | |
Usage
<div class="p-2">
<h5 class="mt-1">The div has a padding 0.5rem and the h5 has a margin-top of 0.25rem</h5>
</div>Formatting
These classes help format various content on your site.
Truncation
To truncate long lines of text in an ellipsis, add the class
truncate to the tag which contains the text. See an example below of a header being truncated inside a card.
This is an extremely long title that will be truncated
<h4 class="truncate">This is an extremely long title that will be truncated</h4>Hover
The hoverable class adds an animation for box shadow as seen below. It can be used on most elements, but is meant
for use on cards.
<article class="hoverable">Hoverable article</article>Browser Defaults
Because we override many of the default browser styles and elements, we provide the
.browser-default class to opt those elements out of the framework treatment.
| Name of Element | Reverted Style |
|---|---|
| SELECT | Browser default select element |
| INPUT | Browser default input |
<select class="browser-default">
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
</select>
<input class="browser-default" type="text">