Column options

Design different types of column layouts

Multiline #

Whenever you want to start a new line, you can close a columns componet and start a new one. But you can also add the multiline modifier and add more column elements that would fit in a single row.

one-quarter

half

one-quarter

Auto

<columns multiline mobile>
  <column one-quarter>
    <code>one-quarter</code>
  </column>
  <column one-quarter>
    <code>one-quarter</code>
  </column>
  <column one-quarter>
    <code>one-quarter</code>
  </column>
  <column one-quarter>
    <code>one-quarter</code>
  </column>

  <column half>
    <code>half</code>
  </column>
    <code>one-quarter</code>
  </column>
  <column one-quarter>
    <code>one-quarter</code>
  </column>

  <column one-quarter>
    <code>one-quarter</code>
  </column>
  <column>
    <code>Auto</code>
  </column>

</columns>

Centering columns #

While you can use empty columns (like <column></column>) to create horizontal space around column components, you can also use centered on the parent columns component:

half
narrow

<columns mobile centered>
  <column half narrow>
    <code>one-quarter</code>
    <p class="bd-notification is-primary">
      <code class="html">is-half</code><br>
      <code class="html">is-narrow</code>
    </p>
  </column>
</columns>

Use with multiline to create a flexible, centered list (try resizing to see centering in different viewport sizes):

narrow
First Column

narrow
Our Second Column

narrow
Third Column

narrow
The Fourth Column

narrow
Fifth Column

<columns mobile multiline centered>

  <column narrow>
    <p class="bd-notification is-primary">
      <code class="html">is-narrow</code><br>
      First Column
    </p>
  </column>

  <column narrow>
    <p class="bd-notification is-primary">
      <code class="html">is-narrow</code><br>
      First Column
    </p>
  </column>

  <column narrow>
    <p class="bd-notification is-primary">
      <code class="html">is-narrow</code><br>
      First Column
    </p>
  </column>

  <column narrow>
    <p class="bd-notification is-primary">
      <code class="html">is-narrow</code><br>
      Our Second Column
    </p>
  </column>

  <column narrow>
    <p class="bd-notification is-primary">
      <code class="html">is-narrow</code><br>
      Third Column
    </p>
  </column>

  <column narrow>
    <p class="bd-notification is-primary">
      <code class="html">is-narrow</code><br>
      The Fourth Column
    </p>
  </column>

  <column narrow>
    <p class="bd-notification is-primary">
      <code class="html">is-narrow</code><br>
      Fifth Column
    </p>
  </column>

</columns>

Designed with by Aldi Duzha