Source: _responsiveness.scss, line 95

6.1 Visibility

@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

Example

Small screens

Big screens

lg only

Sm 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>

ITL utility_classes

ITL utility_classes

6.1 Visibility

Example