مشروب لذيذ
x2
طبق الافطار
x3
هذا النص يمكن أن يتم تركيبه على أي تصميم دون مشكلة فلن يبدو وكأنه نص منسوخ، غير منظم، غير منسق.
هذا النص يمكن أن يتم تركيبه على أي تصميم دون مشكلة فلن يبدو وكأنه نص منسوخ، غير منظم، غير منسق.
هذا النص يمكن أن يتم تركيبه على أي تصميم دون مشكلة فلن يبدو وكأنه نص منسوخ، غير منظم، غير منسق.
Whenever you want to start a new line, you can close a columns container and start a new one. But you can also add the is-multiline modifier and add
more column elements than would fit in a single row.
is-one-quarter
is-one-quarter
is-one-quarter
is-one-quarter
is-half
is-one-quarter
is-one-quarter
is-one-quarter
Auto
<div class="columns is-multiline is-mobile">
<div class="column is-one-quarter">
<code>is-one-quarter</code>
</div>
<div class="column is-one-quarter">
<code>is-one-quarter</code>
</div>
<div class="column is-one-quarter">
<code>is-one-quarter</code>
</div>
<div class="column is-one-quarter">
<code>is-one-quarter</code>
</div>
<div class="column is-half">
<code>is-half</code>
</div>
<div class="column is-one-quarter">
<code>is-one-quarter</code>
</div>
<div class="column is-one-quarter">
<code>is-one-quarter</code>
</div>
<div class="column is-one-quarter">
<code>is-one-quarter</code>
</div>
<div class="column">
Auto
</div>
</div>
While you can use
empty columns (like <div class="column"></div>) to create horizontal space around .column elements, you can also use .is-centered on the parent .columns element:
is-half
<div class="columns is-mobile is-centered">
<div class="column is-half">
<p class="bd-notification is-primary">
<code class="html">is-half</code><br>
</p>
</div>
</div>
Use with .is-multiline to create a flexible, centered list (try resizing to see centering in different viewport sizes):
is-narrow
First Column
is-narrow
Our Second Column
is-narrow
Third Column
is-narrow
The Fourth Column
is-narrow
Fifth Column
<div class="columns is-mobile is-multiline is-centered">
<div class="column is-narrow">
<p class="bd-notification is-primary">
<code class="html">is-narrow</code><br>
First Column
</p>
</div>
<div class="column is-narrow">
<p class="bd-notification is-primary">
<code class="html">is-narrow</code><br>
Our Second Column
</p>
</div>
<div class="column is-narrow">
<p class="bd-notification is-primary">
<code class="html">is-narrow</code><br>
Third Column
</p>
</div>
<div class="column is-narrow">
<p class="bd-notification is-primary">
<code class="html">is-narrow</code><br>
The Fourth Column
</p>
</div>
<div class="column is-narrow">
<p class="bd-notification is-primary">
<code class="html">is-narrow</code><br>
Fifth Column
</p>
</div>
</div>
