1. Design System
  2. Layout
  3. Columns

Columns

A simple way to build responsive columns.

Basic columns

Example of basic 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>

Building a columns layout with Bulma is very simple:

  1. Add a columns container
  2. Add as many column elements as you want

Each column will have an equal width, no matter the number of columns.

Column sizes

Define the size of each column individually.

<div class="columns">
    <div class="column is-four-fifths">is-four-fifths</div>
    <div class="column">Auto</div>
    <div class="column">Auto</div>
</div>
<div class="columns">    
    <div class="column is-three-quarters">is-three-quarters</div>    

    <div class="column">Auto</div>    
    <div class="column">Auto</div>  
</div>    
<div class="columns">    
    <div class="column is-two-thirds">is-two-thirds</div>    
    <div class="column">Auto</div>    
    <div class="column">Auto</div>  
</div>    
<div class="columns">    
    <div class="column is-three-fifths">is-three-fifths</div>    
    <div class="column">Auto</div>    
    <div class="column">Auto</div>  
</div>    
<div class="columns">    
    <div class="column is-half">is-half</div>    
    <div class="column">Auto</div>    
    <div class="column">Auto</div>  
</div>    
<div class="columns">    
    <div class="column is-two-fifths">is-two-fifths</div>    
    <div class="column">Auto</div>    
    <div class="column">Auto</div>  
</div>    
<div class="columns">    
    <div class="column is-one-third">is-one-third</div>    
    <div class="column">Auto</div>    
    <div class="column">Auto</div>  
</div>    
<div class="columns">    
    <div class="column is-one-quarter">is-one-quarter</div>    
    <div class="column">Auto</div>    
    <div class="column">Auto</div>  
</div>    
<div class="columns">    
    <div class="column is-one-fifth">is-one-fifth</div>    
    <div class="column">Auto</div>    
    <div class="column">Auto</div>  
</div>

If you want to change the size of a single column, you can use one of the following classes:

  • is-three-quarters
  • is-two-thirds
  • is-half
  • is-one-third
  • is-one-quarter
  • is-full

The other columns will fill up the remaining space automatically.

You can now use the following multiples of 20% as well:

  • is-four-fifths
  • is-three-fifths
  • is-two-fifths
  • is-one-fifth

12 columns system

The columns can be divided into 12 columns.

<div class="columns">
    <div class="column is-1">is-1</div>
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
</div>
<div class="columns">
    <div class="column is-2">is-2</div>
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
</div>
<div class="columns">
    <div class="column is-3">is-3</div>
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
</div>
<div class="columns">
    <div class="column is-4">is-4</div>
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
</div>
<div class="columns">
    <div class="column is-5">is-5</div>
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
</div>
<div class="columns">
    <div class="column is-6">is-6</div>
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
</div>
<div class="columns">
    <div class="column is-7">is-7</div>
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
</div>
<div class="columns">
    <div class="column is-8">is-8</div>
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
</div>
<div class="columns">
    <div class="column is-9">is-9</div>
    <div class="column">1</div>
    <div class="column">1</div>
    <div class="column">1</div>
</div>
<div class="columns">
    <div class="column is-10">is-10</div>
    <div class="column">1</div>
    <div class="column">1</div>
</div>
<div class="columns">
    <div class="column is-11">is-11</div>
    <div class="column">1</div>
</div>
<div class="columns">
    <div class="column is-12">is-12</div>
</div>

As the grid can be divided into 12 columns, there are size classes for each division:

  • is-1
  • is-2
  • is-3
  • is-4
  • is-5
  • is-6
  • is-7
  • is-8
  • is-9
  • is-10
  • is-11
  • is-12

Offset columns

Classes to offset columns.

<div class="columns is-mobile">
    <div class="column is-half is-offset-one-quarter">
        <p><code class="html">is-half</code><br>
        <code class="html">is-offset-one-quarter</code> </p>
    </div>
</div>
<div class="columns is-mobile">
    <div class="column is-three-fifths is-offset-one-fifth">
        <p><code class="html">is-three-fifths</code><br>
        <code class="html">is-offset-one-fifth</code> </p>
    </div>
</div>
<div class="columns is-mobile">
    <div class="column is-4 is-offset-8">
        <p><code class="html">is-4</code><br>
        <code class="html">is-offset-8</code></p>
    </div>
</div>
<div class="columns is-mobile">
    <div class="column is-11 is-offset-1">
        <p><code class="html">is-11</code><br>
        <code class="html">is-offset-1</code> </p>
    </div>
</div>

While you can use empty columns (like <div class="column"></div>) to create horizontal space around .column elements, you can also use offset modifiers like .is-offset-x.

Accessibility

N/A