bulma/docs/documentation/columns/basics.html

---
title: Columns powered by Flexbox
layout: docs
theme: library
doc-library: true
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>