Permalink
Fetching contributors…
Cannot retrieve contributors at this time
57 lines (52 sloc) 1.22 KB
---
title: Columns powered by Flexbox
layout: documentation
doc-tab: columns
doc-subtab: basics
breadcrumb:
- home
- documentation
- columns
- columns-basics
---
{% capture columns %}
<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>
{% endcapture %}
<div class="content">
<p>Building a <strong>columns layout</strong> with Bulma is very simple:</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="bd-notification is-primary">First column</p>
</div>
<div class="column">
<p class="bd-notification is-primary">Second column</p>
</div>
<div class="column">
<p class="bd-notification is-primary">Third column</p>
</div>
<div class="column">
<p class="bd-notification is-primary">Fourth column</p>
</div>
</div>
<div class="highlight-full">
{% highlight html %}{{ columns }}{% endhighlight %}
</div>