Nesting columns

A simple way to build responsive columns

You can nest columns to have more flexibility in your design. You only need to follow this structure:

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

The difference with multiline columns is the order in the HTML code: all the blue columns appear before the red ones. Resize to a narrower viewport to see the result.

First column

First nested column

Second nested column

Second column

50%

Auto

Auto

Multiline columns will also have a gap between each line.

<div class="columns">
<div class="column">
  <p class="bd-notification is-info">First column</p>
  <div class="columns is-mobile">
    <div class="column">
      <p class="bd-notification is-info">First nested column</p>
    </div>
    <div class="column">
      <p class="bd-notification is-info">Second nested column</p>
    </div>
  </div>
</div>
<div class="column">
  <p class="bd-notification is-danger">Second column</p>
  <div class="columns is-mobile">
    <div class="column is-half">
      <p class="bd-notification is-danger">50%</p>
    </div>
    <div class="column">
      <p class="bd-notification is-danger">Auto</p>
    </div>
    <div class="column">
      <p class="bd-notification is-danger">Auto</p>
    </div>
  </div>
</div>
</div>

返回头部

问题反馈
返回顶部