bulma/docs/documentation/grid/columns.html
2017-07-29 18:24:07 +01:00

894 lines
27 KiB
HTML

---
title: Columns powered by Flexbox
layout: documentation
doc-tab: grid
doc-subtab: columns
---
{% include subnav-grid.html %}
<section class="section">
<div class="container">
<h1 class="title">Columns</h1>
<h2 class="subtitle">A simple way to build <strong>responsive columns</strong></h2>
<hr>
<div class="content">
<p>To build a <strong>grid</strong>, just:</p>
<ol>
<li>Add a <code>columns</code> container</li>
<li>Add as many <code>column</code> elements as you want</li>
</ol>
<p>Each column will have an <strong>equal width</strong>, no matter the number of columns.</p>
</div>
<div class="columns">
<div class="column">
<p class="notification is-info">First column</p>
</div>
<div class="column">
<p class="notification is-success">Second column</p>
</div>
<div class="column">
<p class="notification is-warning">Third column</p>
</div>
<div class="column">
<p class="notification is-danger">Fourth column</p>
</div>
</div>
{% highlight html %}
<div class="columns">
<div class="column">
First column
</div>
<div class="column">
Second column
</div>
<div class="column">
Third column
</div>
<div class="column">
Fourth column
</div>
</div>
{% endhighlight %}
<hr>
<h3 class="title">Sizes</h3>
<div class="content">
<p>If you want to change the <strong>size</strong> of a single column, you can use one the following classes:</p>
<ul>
<li>
<code>is-three-quarters</code>
</li>
<li>
<code>is-two-thirds</code>
</li>
<li>
<code>is-half</code>
</li>
<li>
<code>is-one-third</code>
</li>
<li>
<code>is-one-quarter</code>
</li>
</ul>
<p>The <em>other</em> columns will fill up the <strong>remaining</strong> space automatically.</p>
</div>
<div class="columns">
<div class="column is-three-quarters">
<p class="notification is-info">
<code class="html">is-three-quarters</code>
</p>
</div>
<div class="column">
<p class="notification is-warning">Auto</p>
</div>
<div class="column">
<p class="notification is-danger">Auto</p>
</div>
</div>
<div class="columns">
<div class="column is-two-thirds">
<p class="notification is-info">
<code class="html">is-two-thirds</code>
</p>
</div>
<div class="column">
<p class="notification is-warning">Auto</p>
</div>
<div class="column">
<p class="notification is-danger">Auto</p>
</div>
</div>
<div class="columns">
<div class="column is-half">
<p class="notification is-info">
<code class="html">is-half</code>
</p>
</div>
<div class="column">
<p class="notification is-warning">Auto</p>
</div>
<div class="column">
<p class="notification is-danger">Auto</p>
</div>
</div>
<div class="columns">
<div class="column is-one-third">
<p class="notification is-info">
<code class="html">is-one-third</code>
</p>
</div>
<div class="column">
<p class="notification is-success">Auto</p>
</div>
<div class="column">
<p class="notification is-warning">Auto</p>
</div>
</div>
<div class="columns">
<div class="column is-one-quarter">
<p class="notification is-info">
<code class="html">is-one-quarter</code>
</p>
</div>
<div class="column">
<p class="notification is-success">Auto</p>
</div>
</div>
{% highlight html %}
<div class="columns">
<div class="column is-three-quarters">
<p class="notification is-info">
<code class="html">is-three-quarters</code>
</p>
</div>
<div class="column">
<p class="notification is-warning">Auto</p>
</div>
<div class="column">
<p class="notification is-danger">Auto</p>
</div>
</div>
<div class="columns">
<div class="column is-two-thirds">
<p class="notification is-info">
<code class="html">is-two-thirds</code>
</p>
</div>
<div class="column">
<p class="notification is-warning">Auto</p>
</div>
<div class="column">
<p class="notification is-danger">Auto</p>
</div>
</div>
<div class="columns">
<div class="column is-half">
<p class="notification is-info">
<code class="html">is-half</code>
</p>
</div>
<div class="column">
<p class="notification is-warning">Auto</p>
</div>
<div class="column">
<p class="notification is-danger">Auto</p>
</div>
</div>
<div class="columns">
<div class="column is-one-third">
<p class="notification is-info">
<code class="html">is-one-third</code>
</p>
</div>
<div class="column">
<p class="notification is-success">Auto</p>
</div>
<div class="column">
<p class="notification is-warning">Auto</p>
</div>
</div>
<div class="columns">
<div class="column is-one-quarter">
<p class="notification is-info">
<code class="html">is-one-quarter</code>
</p>
</div>
<div class="column">
<p class="notification is-success">Auto</p>
</div>
</div>
{% endhighlight %}
<h4 class="title is-4">12 columns</h4>
<div class="content">
<p>As the grid can be divided into <strong>12</strong> columns, there are size classes for each division:</p>
<ul>
<li><code>is-2</code></li>
<li><code>is-3</code></li>
<li><code>is-4</code></li>
<li><code>is-5</code></li>
<li><code>is-6</code></li>
<li><code>is-7</code></li>
<li><code>is-8</code></li>
<li><code>is-9</code></li>
<li><code>is-10</code></li>
<li><code>is-11</code></li>
</ul>
</div>
<div class="message is-danger">
<p class="message-header">Naming</p>
<p class="message-body">Each modifier class is named after <strong>how many columns you want out of 12</strong>. So if you want 7 columns out of 12, use <code>is-7</code>.</p>
</div>
<div class="columns">
<div class="column is-2">
<p class="notification is-info"><code>is-2</code></p>
</div>
<div class="column">
<p class="notification is-warning has-text-centered">1</p>
</div>
<div class="column">
<p class="notification is-success has-text-centered">1</p>
</div>
<div class="column">
<p class="notification is-warning has-text-centered">1</p>
</div>
<div class="column">
<p class="notification is-success has-text-centered">1</p>
</div>
<div class="column">
<p class="notification is-warning has-text-centered">1</p>
</div>
<div class="column">
<p class="notification is-success has-text-centered">1</p>
</div>
<div class="column">
<p class="notification is-warning has-text-centered">1</p>
</div>
<div class="column">
<p class="notification is-success has-text-centered">1</p>
</div>
<div class="column">
<p class="notification is-warning has-text-centered">1</p>
</div>
<div class="column">
<p class="notification is-success has-text-centered">1</p>
</div>
</div>
<div class="columns">
<div class="column is-3">
<p class="notification is-info"><code>is-3</code></p>
</div>
<div class="column">
<p class="notification is-warning has-text-centered">1</p>
</div>
<div class="column">
<p class="notification is-success has-text-centered">1</p>
</div>
<div class="column">
<p class="notification is-warning has-text-centered">1</p>
</div>
<div class="column">
<p class="notification is-success has-text-centered">1</p>
</div>
<div class="column">
<p class="notification is-warning has-text-centered">1</p>
</div>
<div class="column">
<p class="notification is-success has-text-centered">1</p>
</div>
<div class="column">
<p class="notification is-warning has-text-centered">1</p>
</div>
<div class="column">
<p class="notification is-success has-text-centered">1</p>
</div>
<div class="column">
<p class="notification is-warning has-text-centered">1</p>
</div>
</div>
<div class="columns">
<div class="column is-4">
<p class="notification is-info"><code>is-4</code></p>
</div>
<div class="column">
<p class="notification is-warning has-text-centered">1</p>
</div>
<div class="column">
<p class="notification is-success has-text-centered">1</p>
</div>
<div class="column">
<p class="notification is-warning has-text-centered">1</p>
</div>
<div class="column">
<p class="notification is-success has-text-centered">1</p>
</div>
<div class="column">
<p class="notification is-warning has-text-centered">1</p>
</div>
<div class="column">
<p class="notification is-success has-text-centered">1</p>
</div>
<div class="column">
<p class="notification is-warning has-text-centered">1</p>
</div>
<div class="column">
<p class="notification is-success has-text-centered">1</p>
</div>
</div>
<div class="columns">
<div class="column is-5">
<p class="notification is-info"><code>is-5</code></p>
</div>
<div class="column">
<p class="notification is-warning has-text-centered">1</p>
</div>
<div class="column">
<p class="notification is-success has-text-centered">1</p>
</div>
<div class="column">
<p class="notification is-warning has-text-centered">1</p>
</div>
<div class="column">
<p class="notification is-success has-text-centered">1</p>
</div>
<div class="column">
<p class="notification is-warning has-text-centered">1</p>
</div>
<div class="column">
<p class="notification is-success has-text-centered">1</p>
</div>
<div class="column">
<p class="notification is-warning has-text-centered">1</p>
</div>
</div>
<div class="columns">
<div class="column is-6">
<p class="notification is-info"><code>is-6</code></p>
</div>
<div class="column">
<p class="notification is-warning has-text-centered">1</p>
</div>
<div class="column">
<p class="notification is-success has-text-centered">1</p>
</div>
<div class="column">
<p class="notification is-warning has-text-centered">1</p>
</div>
<div class="column">
<p class="notification is-success has-text-centered">1</p>
</div>
<div class="column">
<p class="notification is-warning has-text-centered">1</p>
</div>
<div class="column">
<p class="notification is-success has-text-centered">1</p>
</div>
</div>
<div class="columns">
<div class="column is-7">
<p class="notification is-info"><code>is-7</code></p>
</div>
<div class="column">
<p class="notification is-warning has-text-centered">1</p>
</div>
<div class="column">
<p class="notification is-success has-text-centered">1</p>
</div>
<div class="column">
<p class="notification is-warning has-text-centered">1</p>
</div>
<div class="column">
<p class="notification is-success has-text-centered">1</p>
</div>
<div class="column">
<p class="notification is-warning has-text-centered">1</p>
</div>
</div>
<div class="columns">
<div class="column is-8">
<p class="notification is-info"><code>is-8</code></p>
</div>
<div class="column">
<p class="notification is-warning has-text-centered">1</p>
</div>
<div class="column">
<p class="notification is-success has-text-centered">1</p>
</div>
<div class="column">
<p class="notification is-warning has-text-centered">1</p>
</div>
<div class="column">
<p class="notification is-success has-text-centered">1</p>
</div>
</div>
<div class="columns">
<div class="column is-9">
<p class="notification is-info"><code>is-9</code></p>
</div>
<div class="column">
<p class="notification is-warning has-text-centered">1</p>
</div>
<div class="column">
<p class="notification is-success has-text-centered">1</p>
</div>
<div class="column">
<p class="notification is-warning has-text-centered">1</p>
</div>
</div>
<div class="columns">
<div class="column is-10">
<p class="notification is-info"><code>is-10</code></p>
</div>
<div class="column">
<p class="notification is-warning has-text-centered">1</p>
</div>
<div class="column">
<p class="notification is-success has-text-centered">1</p>
</div>
</div>
<div class="columns">
<div class="column is-11">
<p class="notification is-info"><code>is-11</code></p>
</div>
<div class="column">
<p class="notification is-warning has-text-centered">1</p>
</div>
</div>
<hr>
<h3 class="title">Offset</h3>
<div class="content">
<p>While you can use <em>empty columns</em> (like <code>&lt;div class="column"&gt;&lt;/div&gt;</code>) to create horizontal space around <code>.column</code> elements, you can also use <strong>offset</strong> modifiers like <code>.is-offset-x</code>:
</div>
<div class="columns is-mobile">
<div class="column is-half is-offset-one-quarter">
<p class="notification is-info">
<code class="html">is-half</code><br>
<code class="html">is-offset-one-quarter</code>
</p>
</div>
</div>
<div class="columns is-mobile">
<div class="column is-4 is-offset-8">
<p class="notification is-info">
<code class="html">is-4</code><br>
<code class="html">is-offset-8</code>
</p>
</div>
</div>
<div class="columns is-mobile">
<div class="column is-11 is-offset-1">
<p class="notification is-info">
<code class="html">is-11</code><br>
<code class="html">is-offset-1</code>
</p>
</div>
</div>
{% highlight html %}
<div class="columns is-mobile">
<div class="column is-half is-offset-one-quarter"></div>
</div>
<div class="columns is-mobile">
<div class="column is-4 is-offset-8"></div>
</div>
<div class="columns is-mobile">
<div class="column is-11 is-offset-1"></div>
</div>
{% endhighlight %}
<hr>
<h3 class="title">Responsiveness</h3>
<div class="content">
<p>By default, columns are only activated from <strong>tablet</strong> onwards. This means columns are stacked on top of each other on <strong>mobile</strong>.</p>
<p>If you want columns to work on <strong>mobile too</strong>, just add the <code>is-mobile</code> modifier on the <code>columns</code> container:</p>
</div>
<div class="columns is-mobile">
<div class="column">
<p class="notification is-info">1</p>
</div>
<div class="column">
<p class="notification is-success">2</p>
</div>
<div class="column">
<p class="notification is-warning">3</p>
</div>
<div class="column">
<p class="notification is-danger">4</p>
</div>
</div>
{% highlight html %}
<div class="columns is-mobile">
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
<div class="column">4</div>
</div>
{% endhighlight %}
<div class="message is-info">
<p class="message-header">Resize</p>
<p class="message-body">If you want to see the difference, resize your browser and see <em>when</em> the columns are stacked and when they are horizontally distributed.</p>
</div>
<div class="content">
<p>If you <em>only</em> want columns on <strong>desktop</strong>, just use the <code>is-desktop</code> modifier on the <code>columns</code> container:</p>
</div>
<div class="columns is-desktop">
<div class="column">
<p class="notification is-info">1</p>
</div>
<div class="column">
<p class="notification is-success">2</p>
</div>
<div class="column">
<p class="notification is-warning">3</p>
</div>
<div class="column">
<p class="notification is-danger">4</p>
</div>
</div>
{% highlight html %}
<div class="columns is-desktop">
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
<div class="column">4</div>
</div>
{% endhighlight %}
<h4 class="title is-4">Different sizes per breakpoint</h4>
<div class="content">
<p>You can define a <strong>column size</strong> for <em>each</em> viewport size: mobile, tablet, and desktop.</p>
</div>
<div class="columns is-mobile">
<div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop">
<p class="notification is-info">
<code>is-half-mobile</code><br>
<code>is-one-third-tablet</code><br>
<code>is-one-quarter-desktop</code>
</p>
</div>
<div class="column">
<p class="notification is-success">1</p>
</div>
<div class="column">
<p class="notification is-warning">1</p>
</div>
<div class="column">
<p class="notification is-success">1</p>
</div>
<div class="column">
<p class="notification is-warning">1</p>
</div>
</div>
<div class="message is-info">
<p class="message-header">Resize</p>
<p class="message-body">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.</p>
</div>
{% highlight html %}
<div class="columns is-mobile">
<div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop">
<code>is-half-mobile</code><br>
<code>is-one-third-tablet</code><br>
<code>is-one-quarter-desktop</code>
</div>
<div class="column">1</div>
<div class="column">1</div>
<div class="column">1</div>
<div class="column">1</div>
</div>
{% endhighlight %}
<hr>
<h3 id="nesting" class="title">Nesting</h3>
<div class="content">
<p>
You can <strong>nest</strong> columns to have more flexibility in your design. You only need to follow this structure:
</p>
<ul>
<li>
<code>columns</code>: top-level columns container
<ul>
<li>
<code>column</code>
<ul>
<li>
<code>columns</code>: nested columns
<ul>
<li>
<code>column</code> and so on…
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<p>
The difference with <a href="#multiline">multiline columns</a> is the <strong>order</strong> in the HTML code: all the <strong class="has-text-info">blue</strong> columns appear <em>before</em> the <strong class="has-text-danger">red</strong> ones. Resize to a narrower viewport to see the result.
</p>
</div>
<div class="columns">
<div class="column">
<p class="notification is-info">First column</p>
<div class="columns is-mobile">
<div class="column">
<p class="notification is-info">First nested column</p>
</div>
<div class="column">
<p class="notification is-info">Second nested column</p>
</div>
</div>
</div>
<div class="column">
<p class="notification is-danger">Second column</p>
<div class="columns is-mobile">
<div class="column is-half">
<p class="notification is-danger">50%</p>
</div>
<div class="column">
<p class="notification is-danger">Auto</p>
</div>
<div class="column">
<p class="notification is-danger">Auto</p>
</div>
</div>
</div>
</div>
{% highlight html %}
<div class="columns">
<div class="column">
First column
<div class="columns is-mobile">
<div class="column">
First nested column
</div>
<div class="column">
Second nested column
</div>
</div>
</div>
<div class="column">
Second column
<div class="columns is-mobile">
<div class="column is-half">
50%
</div>
<div class="column">
Auto
</div>
<div class="column">
Auto
</div>
</div>
</div>
</div>
{% endhighlight %}
<hr>
<h3 id="multiline" class="title">Multiline</h3>
<div class="content">
<p>Whenever you want to start a new line, you can close a <code>columns</code> container and start a new one. But you can also add the <code>is-multiline</code> modifier and add <strong>more</strong> column elements that would fit in a single row.</p>
</div>
<div class="columns is-multiline is-mobile">
<div class="column is-one-quarter">
<p class="notification is-info"><code>is-one-quarter</code></p>
</div>
<div class="column is-one-quarter">
<p class="notification is-success"><code>is-one-quarter</code></p>
</div>
<div class="column is-one-quarter">
<p class="notification is-warning"><code>is-one-quarter</code></p>
</div>
<div class="column is-one-quarter">
<p class="notification is-danger"><code>is-one-quarter</code></p>
</div>
<div class="column is-half">
<p class="notification is-info"><code>is-half</code></p>
</div>
<div class="column is-one-quarter">
<p class="notification is-success"><code>is-one-quarter</code></p>
</div>
<div class="column is-one-quarter">
<p class="notification is-warning"><code>is-one-quarter</code></p>
</div>
<div class="column is-one-quarter">
<p class="notification is-danger"><code>is-one-quarter</code></p>
</div>
<div class="column">
<p class="notification is-info">Auto</p>
</div>
</div>
{% highlight html %}
<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">
Auto
</div>
</div>
{% endhighlight %}
<hr>
<h3 class="title">Gapless</h3>
<div class="content">
<p>If you want to remove the <strong>space</strong> between the columns, add the <code>is-gapless</code> modifier on the <code>columns</code> container:</p>
</div>
<div class="columns is-gapless">
<div class="column">
<p class="notification is-info">First column</p>
</div>
<div class="column">
<p class="notification is-success">Second column</p>
</div>
<div class="column">
<p class="notification is-warning">Third column</p>
</div>
<div class="column">
<p class="notification is-danger">Fourth column</p>
</div>
</div>
{% highlight html %}
<div class="columns is-gapless">
<div class="column">First column</div>
<div class="column">Second column</div>
<div class="column">Third column</div>
<div class="column">Fourth column</div>
</div>
{% endhighlight %}
<div class="content">
<p>You can combine it with the <code>is-multiline</code> modifier:</p>
</div>
<div class="columns is-multiline is-mobile is-gapless">
<div class="column is-one-quarter">
<p class="notification is-info"><code>is-one-quarter</code></p>
</div>
<div class="column is-one-quarter">
<p class="notification is-success"><code>is-one-quarter</code></p>
</div>
<div class="column is-one-quarter">
<p class="notification is-warning"><code>is-one-quarter</code></p>
</div>
<div class="column is-one-quarter">
<p class="notification is-danger"><code>is-one-quarter</code></p>
</div>
<div class="column is-half">
<p class="notification is-info"><code>is-half</code></p>
</div>
<div class="column is-one-quarter">
<p class="notification is-success"><code>is-one-quarter</code></p>
</div>
<div class="column is-one-quarter">
<p class="notification is-warning"><code>is-one-quarter</code></p>
</div>
<div class="column is-one-quarter">
<p class="notification is-danger"><code>is-one-quarter</code></p>
</div>
<div class="column">
<p class="notification is-info">Auto</p>
</div>
</div>
{% highlight html %}
<div class="columns is-gapless 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">
Auto
</div>
</div>
{% endhighlight %}
<hr>
<h3 class="title">Narrow column</h3>
<div class="content">
<p>If you want a column to only take the <strong>space it needs</strong>, use the <code>is-narrow</code> modifier. The other column(s) will fill up the remaining space.</p>
</div>
<div class="columns">
<div class="column is-narrow">
<div class="box" style="width: 200px;">
<p class="title is-5">Narrow column</p>
<p class="subtitle">This column is only 200px wide.</p>
</div>
</div>
<div class="column">
<div class="box">
<p class="title is-5">Flexible column</p>
<p class="subtitle">This column will take up the remaining space available.</p>
</div>
</div>
</div>
{% highlight html %}
<div class="columns">
<div class="column is-narrow">
<div class="box" style="width: 200px;">
<p class="title is-5">Narrow column</p>
<p class="subtitle">This column is only 200px wide.</p>
</div>
</div>
<div class="column">
<div class="box">
<p class="title is-5">Flexible column</p>
<p class="subtitle">This column will take up the remaining space available.</p>
</div>
</div>
</div>
{% endhighlight %}
<div class="content">
<p>As for the size modifiers, you can have narrow columns for different <strong>breakpoints</strong>:</p>
<ul>
<li>
<code>is-narrow-mobile</code>
</li>
<li>
<code>is-narrow-tablet</code>
</li>
<li>
<code>is-narrow-desktop</code>
</li>
</ul>
</div>
</div>
</section>