Helpers

Display

Since 1.3.0

Show or hide content depending on the media type.

.hidden Completely hidden, in any case.
.hidden-print Hidden when printed.
.invisible Invisible but takes place in the flow.
.invisible-print Invisible when printed.
.visible-print Visible only when printed.
.visible-sr Visible only to screen readers.
The following classes depends on the breakpoints defined in the settings, here are the defaults.
Class Extra-small Small Medium Large
.hidden-sm-up Visible Hidden Hidden Hidden
.hidden-md-up Visible Visible Hidden Hidden
.hidden-lg-up Visible Visible Visible Hidden
.hidden-xs-down Hidden Visible Visible Visible
.hidden-sm-down Hidden Hidden Visible Visible
.hidden-md-down Hidden Hidden Hidden Visible
Hidden when printed
Invisible when printed
Visible only when printed
Visible only to screen readers
Hidden on small screens and above
Hidden on medium screens and above
Hidden on large screens and above
Hidden on extra-small screens
Hidden on small screens and under
Hidden on medium screens and under
Hidden when printed
<div class="hidden">Hidden</div>
<div class="hidden-print">Hidden when printed</div>
<div class="invisible">Invisible</div>
<div class="invisible-print">Invisible when printed</div>
<div class="visible-print">Visible only when printed</div>
<div class="visible-sr">Visible only to screen readers</div>
<div class="hidden-sm-up">Hidden on small screens and above</div>
<div class="hidden-md-up">Hidden on medium screens and above</div>
<div class="hidden-lg-up">Hidden on large screens and above</div>
<div class="hidden-xs-down">Hidden on extra-small screens</div>
<div class="hidden-sm-down">Hidden on small screens and under</div>
<div class="hidden-md-down">Hidden on medium screens and under</div>
<div class="hidden-print">Hidden when printed</div>
Toggle code

Float

Element floating on the left
Element floating on the right
<div class="clearfix">
	<div class="pull-left">Element floating on the left</div>
	<div class="pull-right">Element floating on the right</div>
</div>
Toggle code

Images

Prevents an image from overflowing its container with img-responsive or make it fit its container with img-block.

<p><img src="https://placehold.it/800x200" class="img-responsive"></p>

<p><img src="https://placehold.it/800x200" class="img-block"></p>
Toggle code

Positioning

Use transforms to position a container within the closest relative parent.

Vertically aligned
Vertically & horizontally aligned
<div class="( mrgb )">
	<img src="https://placehold.it/200x100" class="h-align">
</div>

<div class="relative-parent ( box box--default mrgb )" style="height: 200px">
	<div class="v-align">Vertically aligned</div>
</div>

<div class="relative-parent ( box box--default )" style="height: 200px">
	<div class="vh-align">Vertically &amp; horizontally aligned</div>
</div>
Toggle code

Spacings

Since 1.3.0 This component follow the mobile-first approach, using minimum width breakpoints by default. For example a class named sm-mrgt target small screens as before but also all upper sizes; medium, large and beyond.

Alter spacings (padding or margin) on elements according to the spacing units defined in the settings.

mrg
Margin
pdg
Padding
{empty}
All sides
t
Top
r
Right
b
Bottom
l
Left
v
Vertical (top & bottom)
h
Horizontal (left & right)
0
Zero
--
Quarter spacing unit
-
Half spacing unit
{empty}
Base spacing unit
+
Double spacing unit
++
Quadruple spacing unit

You can also restrict style to specific breakpoints by prefixing them with the media query name, for example .lg-pdg+ to match only large screens. Those breakpoints are mobile-first and therefor apply to the targeted breakpoint and above.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore fuga delectus debitis asperiores distinctio saepe itaque aut, temporibus veritatis rerum odit exercitationem facilis, impedit amet, molestiae necessitatibus natus. Distinctio, nam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore fuga delectus debitis asperiores distinctio saepe itaque aut, temporibus veritatis rerum odit exercitationem facilis, impedit amet, molestiae necessitatibus natus. Distinctio, nam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore fuga delectus debitis asperiores distinctio saepe itaque aut, temporibus veritatis rerum odit exercitationem facilis, impedit amet, molestiae necessitatibus natus. Distinctio, nam.
Responsive Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore fuga delectus debitis asperiores distinctio saepe itaque aut, temporibus veritatis rerum odit exercitationem facilis, impedit amet, molestiae necessitatibus natus. Distinctio, nam.
Responsive Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore fuga delectus debitis asperiores distinctio saepe itaque aut, temporibus veritatis rerum odit exercitationem facilis, impedit amet, molestiae necessitatibus natus. Distinctio, nam. 
<div class="pdg ( box box--tight box--default )">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore fuga delectus debitis asperiores distinctio saepe itaque aut, temporibus veritatis rerum odit exercitationem facilis, impedit amet, molestiae necessitatibus natus. Distinctio, nam.
</div>
<div class="mrg- ( box box--tight box--default )">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore fuga delectus debitis asperiores distinctio saepe itaque aut, temporibus veritatis rerum odit exercitationem facilis, impedit amet, molestiae necessitatibus natus. Distinctio, nam.
</div>
<div class="pdgv- pdgh+ mrgt+ mrgb- ( box box--tight box--default )">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore fuga delectus debitis asperiores distinctio saepe itaque aut, temporibus veritatis rerum odit exercitationem facilis, impedit amet, molestiae necessitatibus natus. Distinctio, nam.
</div>
<div class="pdg md-pdg- mrgh ( box box--tight box--default )">
	<strong>Responsive</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore fuga delectus debitis asperiores distinctio saepe itaque aut, temporibus veritatis rerum odit exercitationem facilis, impedit amet, molestiae necessitatibus
	natus. Distinctio, nam.
</div>
<div class="mrgv lg-mrgv- ( box box--tight box--default )">
	<strong>Responsive</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore fuga delectus debitis asperiores distinctio saepe itaque aut, temporibus veritatis rerum odit exercitationem facilis, impedit amet, molestiae necessitatibus
	natus. Distinctio, nam.
</div>
Toggle code

Typography

Use these only when dedicated tags, such as em or strong, are not applicable.

Since version 1.5.0, you can also restrict alignment to specific breakpoints by prefixing them with the media query name, for example .lg-text-right to match only large screens. Those breakpoints are mobile-first and therefor apply to the targeted breakpoint and above.

Text aligned on the left

Text aligned in the middle

Text aligned on the right

Text aligned on the center for medium screens and above

Text aligned on the right for large screens only

Uppercased text

capitalized text

Italic text

Bold text

Small text

Large text

Text muted

<p class="text-left">Text aligned on the left</p>
<p class="text-center">Text aligned in the middle</p>
<p class="text-right">Text aligned on the right</p>

<p class="md-text-center">Text aligned on the center for medium screens and above</p>
<p class="lg-text-right">Text aligned on the right for large screens only</p>

<p class="text-uppercase">Uppercased text</p>
<p class="text-capitalize">capitalized text</p>

<p class="text-italic">Italic text</p>
<p class="text-bold">Bold text</p>

<p class="text-small">Small text</p>
<p class="text-large">Large text</p>

<p class="text-muted">Text muted</p>
Toggle code