Overview

.column_N - where N - is the number of columns. By default there are 12 of them.

column item

column item

column item

column item

<div class="column_4">
    <p>column item</p>
    <p>column item</p>
    <p>column item</p>
    <p>column item</p>
</div>

Attention!

Column layout is applied to all child elements and is aligned along the top edge

Full width columns

.full-width - stretches the internal elements over the entire width

column item

column item

column item

column item

<div class="column_4 full-width">
    <p>column item</p>
    <p>column item</p>
    <p>column item</p>
    <p>column item</p>
</div>

Without margins

.margin-none - stretches the internal elements over the entire width without the margins

column item

column item

column item

column item

<div class="column_4 margin-none">
    <p>column item</p>
    <p>column item</p>
    <p>column item</p>
    <p>column item</p>
</div>

Vertical alignment


Align the middle

Look, I can take you as far as Anchorhead. You can get a transport there to Mos Eisley or wherever you're going. The Force is strong with this one. I have you now. I find your lack of faith disturbing. Leave that to me. Send a distress signal, and inform the Senate that all on board were killed. You are a part of the Rebel Alliance and a traitor! Take her away!

<div class="column_2 middle">
    <p><img src="..." alt="..."></p>
    <p>...</p>
</div>

Align in the bottom edge

Look, I can take you as far as Anchorhead. You can get a transport there to Mos Eisley or wherever you're going. The Force is strong with this one. I have you now. I find your lack of faith disturbing. Leave that to me. Send a distress signal, and inform the Senate that all on board were killed. You are a part of the Rebel Alliance and a traitor! Take her away!

<div class="column_2 bottom">
    <p><img src="..." alt="..."></p>
    <p>...</p>
</div>

Columns for mobile devices

Columns for mobile devices work just like regular columns, but they use classes with additional prefix:

  • Devices from 481px to 768px  use the class .t-column_N with maximum quantity of columns - 6.
  • Devices with the width up to 480px use the class .m-column_N with maximum quantity of columns - 4.

column item

column item

column item

column item

<div class="column_4 t-column_3 m-column_2">
    <p>column item</p>
    <p>column item</p>
    <p>column item</p>
    <p>column item</p>
</div>