مشروب لذيذ
x2
طبق الافطار
x3
هذا النص يمكن أن يتم تركيبه على أي تصميم دون مشكلة فلن يبدو وكأنه نص منسوخ، غير منظم، غير منسق.
هذا النص يمكن أن يتم تركيبه على أي تصميم دون مشكلة فلن يبدو وكأنه نص منسوخ، غير منظم، غير منسق.
هذا النص يمكن أن يتم تركيبه على أي تصميم دون مشكلة فلن يبدو وكأنه نص منسوخ، غير منظم، غير منسق.
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>
