---
title: Columns gap
layout: documentation
doc-tab: columns
doc-subtab: gap
---

{% capture columns_gap %}
<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 gap</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>

    {% highlight html %}{{ columns_gap }}{% endhighlight %}
  </div>
</section>