Source: _responsiveness.scss, line 25
@mixin container($size:optional)
Wrap content into containers to make it responsive
Default containers max-width: 1200px
<div class="container bg-white">
<h2>Nice container u got there</h2>
</div>
<div class="container container--small bg-white">
<h2>Nice small container u got there</h2>
</div>Source: _responsiveness.scss, line 95
@mixin show($size) -- and below
@mixin hide($size) -- and below
@mixin hideOnly($size)
@mixin showOnly($size)
<show/hide>-<x>(-and_below)
Made with flexboxgrid compatibility| < 768px | < 1024px | < 1200px | > 1200px | |
|---|---|---|---|---|
| .hide-xs .hide-xs-only | ||||
| .hide-sm | ||||
| .hide-md | ||||
| .hide-sm-only | ||||
| .hide-md-only | ||||
| .hide-lg-only | ||||
| .show-xs | ||||
| .show-sm | ||||
| .show-md | ||||
| .show-xs-only | ||||
| .show-sm-only | ||||
| .show-md-only | ||||
| .show-lg-only |
<div class="bg-red show-sm">Small screens</div>
<div class="bg-blue hide-sm">Big screens</div>
<div class="bg-purple show-lg-only">lg only</div>
<div class="bg-white show-sm-only">Sm only</div>