Haircut Price
Shave Price
nesting
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-
columnand 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>
