Skip to content
Permalink
master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Go to file
 
 
Cannot retrieve contributors at this time
---
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="bd-highlight-full">
{% highlight html %}{{ columns }}{% endhighlight %}
</div>