Alignment

You can check the full list of available breakpoints here.

Horizontal aligment

*:center
*:left
*:right
*:justify


<div class="line">
  <div class="x:scol-4">
    <p class="x:left">Left</p>
  </div>
  <div class="x:scol-4">
    <p class="x:center">Center</p>
  </div>
  <div class="x:scol-4">
    <p class="x:right">Right</p>
  </div>
</div>

Left

Center

Right

A little trick when using horizontal alignment on columns is that they are of the inline-block type so you can quickly align columns without using offset classes, but remember that alignment will be inherited unless there is a class stating otherwise. Use this trick only if you understand it well.


<div class="line x:center">
  <div class="x:scol-6">
    <p>This column is centered</p>
  </div>
</div>

<div class="line x:center">
  <div class="x:scol-6">
    <p class="x:left">This column is centered but its content is aligned to the left</p>
  </div>
</div>

This column is centered

This column is centered but its content is aligned to the left

Vertical aligment

*:baseline
*:bottom
*:middle
*:top

Vertical alignment is intended to be used in columns, but can also be used in any inline-block type element.

scol and scol-fit columns are vertically centered by default, so there is no need to declare the .x:middle class unless you want to change their alignment.


<div class="line">
  <div class="x:scol-4">...</div>
  <div class="x:scol-4">...</div>
  <div class="x:scol-4">...</div>
</div>

You can align to the top.


<div class="line">
  <div class="x:scol-4 x:top">...</div>
  <div class="x:scol-4 x:top">...</div>
  <div class="x:scol-4 x:top">...</div>
</div>

You can align to the bottom.


<div class="line">
  <div class="x:scol-4 x:bottom">...</div>
  <div class="x:scol-4 x:bottom">...</div>
  <div class="x:scol-4 x:bottom">...</div>
</div>

Or you can combine them too.


<div class="line">
  <div class="x:scol-4 x:bottom">...</div>
  <div class="x:scol-4 x:bottom">...</div>
  <div class="x:scol-4 x:top">...</div>
</div>