---
title: Columns powered by Flexbox
layout: documentation
doc-tab: columns
doc-subtab: 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 %}

{% include subnav-columns.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>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-info">First column</p>
      </div>
      <div class="column">
        <p class="bd-notification is-success">Second column</p>
      </div>
      <div class="column">
        <p class="bd-notification is-warning">Third column</p>
      </div>
      <div class="column">
        <p class="bd-notification is-danger">Fourth column</p>
      </div>
    </div>

    <div class="highlight-full">
      {% highlight html %}{{ columns }}{% endhighlight %}
    </div>
  </div>
</section>