-
Columns
-
A simple way to build responsive columns
-
-
-
To build a grid, just:
-
- - Add a
columns container
- - Add as many
column elements as you want
-
-
Each column will have an equal width, no matter the number of columns.
-
-
-
-
- {% highlight html %}{{ columns }}{% endhighlight %}
-
- {% include elements/anchor.html name="Sizes" %}
-
-
-
If you want to change the size of a single column, you can use one the following classes:
-
- -
-
is-three-quarters
-
- -
-
is-two-thirds
-
- -
-
is-half
-
- -
-
is-one-third
-
- -
-
is-one-quarter
-
-
-
The other columns will fill up the remaining space automatically.
-
-
-
-
- is-three-quarters
-
-
-
-
-
-
-
-
-
-
- {% highlight html %}{{ columns_sizes }}{% endhighlight %}
-
-
12 columns
-
-
As the grid can be divided into 12 columns, there are size classes for each division:
-
- is-2is-3is-4is-5is-6is-7is-8is-9is-10is-11
-
-
-
-
Each modifier class is named after how many columns you want out of 12. So if you want 7 columns out of 12, use is-7.
-
-
-
-
-
-
-
-
-
-
-
-
-
- {% include elements/anchor.html name="Offset" %}
-
-
-
- While you can use empty columns (like <div class="column"></div>) to create horizontal space around .column elements, you can also use offset modifiers like .is-offset-x:
-
-
-
-
-
-
- is-half
- is-offset-one-quarter
-
-
-
-
-
-
-
- is-4
- is-offset-8
-
-
-
-
-
-
-
- is-11
- is-offset-1
-
-
-
-
- {% highlight html %}{{ columns_offset }}{% endhighlight %}
-
- {% include elements/anchor.html name="Centering columns" %}
-
-
-
- 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
- is-narrow
-
-
-
-
- {% highlight html %}{{ columns_mobile_centered }}{% endhighlight %}
-
-
-
- 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
-
-
-
-
- {% highlight html %}{{ columns_mobile_multiline_centered }}{% endhighlight %}
-
- {% include elements/anchor.html name="Responsiveness" %}
-
-
-
By default, columns are only activated from tablet onwards. This means columns are stacked on top of each other on mobile.
-
If you want columns to work on mobile too, just add the is-mobile modifier on the columns container:
-
-
- {% highlight html %}{{ columns_mobile }}{% endhighlight %}
-
-
-
If you want to see the difference, resize your browser and see when the columns are stacked and when they are horizontally distributed.
-
-
-
If you only want columns on desktop, just use the is-desktop modifier on the columns container:
-
-
- {% highlight html %}{{ columns_desktop }}{% endhighlight %}
-
-
Different sizes per breakpoint
-
-
You can define a column size for each viewport size: mobile, tablet, and desktop.
-
-
-
-
- is-half-mobile
- is-one-third-tablet
- is-one-quarter-desktop
-
-
-
-
-
-
-
-
-
-
If you want to see these classes in action, resize your browser window and see how the same column varies in width at each breakpoint.
-
- {% highlight html %}{{ columns_multiple_breakpoints }}{% endhighlight %}
-
- {% include elements/anchor.html name="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
-
- -
-
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.
-
-
-
-
-
- {% highlight html %}{{ columns_nesting }}{% endhighlight %}
-
- {% include elements/anchor.html name="Multiline" %}
-
-
-
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 that would fit in a single row.
-
-
-
- {% highlight html %}{{ columns_multiline }}{% endhighlight %}
-
- {% include elements/anchor.html name="Gapless" %}
-
-
-
If you want to remove the space between the columns, add the is-gapless modifier on the columns container:
-
-
- {% highlight html %}{{ columns_gapless }}{% endhighlight %}
-
-
You can combine it with the is-multiline modifier:
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {% highlight html %}{{ columns_gapless_multiline }}{% endhighlight %}
-
- {% include elements/anchor.html name="Narrow column" %}
-
-
-
If you want a column to only take the space it needs, use the is-narrow modifier. The other column(s) will fill up the remaining space.
-
-
-
-
-
Narrow column
-
This column is only 200px wide.
-
-
-
-
-
Flexible column
-
This column will take up the remaining space available.
-
-
-
- {% highlight html %}{{ columns_narrow }}{% endhighlight %}
-
-
As for the size modifiers, you can have narrow columns for different breakpoints:
-
- -
-
is-narrow-mobile
-
- -
-
is-narrow-tablet
-
- -
-
is-narrow-desktop
-
-
-
-
+ 
+