Nesting

You can nest columns following this structure:

  • columns: top-level container
    • column
      • columns: nested columns
        • column and so on

First column

First nested column

Second nested column

Second column

is-6

auto

auto

<div class="columns">
    <div class="column">
        <p class="is-primary">First column</p>
        <div class="columns is-mobile">
          <div class="column">
            <p class="is-primary">First nested column</p>
          </div>
          <div class="column">
            <p class="is-primary">Second nested column</p>
          </div>
        </div>
    </div>
    <div class="column">
        <p class="is-info">Second column</p>
        <div class="columns is-mobile">
          <div class="column is-6">
            <p class="is-info"><code>is-6</code></p>
          </div>
          <div class="column">
            <p class="is-info">auto</p>
          </div>
          <div class="column">
              <p class="is-info">auto</p>
            </div>
        </div>
    </div>
</div>
← Gap →