Helper classes
A set of classes to help you deal with common styling.
Unlike utilities classes, helpers classes does not follow any specific format and can achieve multiple things. They are global classes.
- Container, layout your page
.container
.container-fluid
- Visibility, hide elements between devices
.hidden@screenName
.hidden!@screenName
- List, format ul/ol elements easily
.list-unstyle
.list-inline
.list-center
- Miscellaneous, set an image responsive
.responsive
and add your own
Example
<header class="hidden@print">
<a class="hidden@sm" href="#" title="Collapse">[+]</a>
<nav class="container">
<ul class="list-inline">
<li>Home</li>
<li>Documentation</li>
<li>Code samples</li>
</ul>
</nav>
</header>
<article class="container">
<img class="responsive" src="image.jpg">
<h1>Here is my article title</h1>
<p>With a excerpt with Lorem, ipsum.</p>
</article>
<footer class="container">
@copyright
</footer>