Hide & Show

You can check the full list of available breakpoints here.

How to use

*:hide (display: none)
*:show (display: block)
*:show-inline (display: inline-block)


<div class="line">
  <div class="x:scol-3">
    <p class="x:hide s:show">Look at me!</p>
  </div>
  <div class="x:scol-3">
    <p class="s:hide m:show">Look at me!</p>
  </div>
  <div class="x:scol-3">
    <p class="m:hide l:show">Look at me!</p>
  </div>
  <div class="x:scol-3">
    <p class="l:hide">Look at me!</p>
  </div>
</div>

Look at me!

You can combine breakpoints to show elements only in some specific breakpoints according to your needs. In the following example, the paragraph will only be shown in breakpoint x and m, resize your browser to better understand the behavior.


<p class="s:hide m:show l:hide x:fs-20 x:center">Can you see me?</p>

Can you see me?

...

Hide and show columns

Columns are inline-block type, it is important to use *:show-inline in columns or elements to be displayed again and require to maintain or set the property display: inline-block


<div class="line">
  <div class="x:scol-3 x:hide s:show-inline">1</div>
  <div class="x:scol-3 s:hide m:show-inline">2</div>
  <div class="x:scol-3 m:hide l:show-inline">3</div>
  <div class="x:scol-3 l:hide">4</div>
</div>

Print

With the following classes you can show or hide content during printing.

*:hide-print (display: none)
*:show-print (display: block)
*:show-print-inline (display: inline-block)


<div class="line">
  <div class="x:scol-6">
    <p class="hide-print">Hide on print</p>
  </div>
  <div class="x:scol-6">
    <p class="show-print">Show on print</p>
  </div>
</div>

Hide on print

Show on print