You are viewing the deprecated 0.4.4 version of the website. Click here to view the latest version

Documentation

Everything you need to create a website with Bulma

# Columns

## A simple way to build responsive columns

To build a grid, just:

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.

First column

Second column

Third column

Fourth column

    <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>

### Sizes

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

- `is-three-quarters`
- `is-two-thirds`
- `is-half`
- `is-one-third`
- `is-one-quarter`

The other columns will fill up the remaining space automatically.

`is-three-quarters`

Auto

Auto

`is-two-thirds`

Auto

Auto

`is-half`

Auto

Auto

`is-one-third`

Auto

Auto

`is-one-quarter`

Auto

    <div class="columns">
      <div class="column is-three-quarters">
        <p class="notification is-info">
          <code class="html">is-three-quarters</code>
        </p>
      </div>
      <div class="column">
        <p class="notification is-warning">Auto</p>
      </div>
      <div class="column">
        <p class="notification is-danger">Auto</p>
      </div>
    </div>

    <div class="columns">
      <div class="column is-two-thirds">
        <p class="notification is-info">
          <code class="html">is-two-thirds</code>
        </p>
      </div>
      <div class="column">
        <p class="notification is-warning">Auto</p>
      </div>
      <div class="column">
        <p class="notification is-danger">Auto</p>
      </div>
    </div>

    <div class="columns">
      <div class="column is-half">
        <p class="notification is-info">
          <code class="html">is-half</code>
        </p>
      </div>
      <div class="column">
        <p class="notification is-warning">Auto</p>
      </div>
      <div class="column">
        <p class="notification is-danger">Auto</p>
      </div>
    </div>

    <div class="columns">
      <div class="column is-one-third">
        <p class="notification is-info">
          <code class="html">is-one-third</code>
        </p>
      </div>
      <div class="column">
        <p class="notification is-success">Auto</p>
      </div>
      <div class="column">
        <p class="notification is-warning">Auto</p>
      </div>
    </div>

    <div class="columns">
      <div class="column is-one-quarter">
        <p class="notification is-info">
          <code class="html">is-one-quarter</code>
        </p>
      </div>
      <div class="column">
        <p class="notification is-success">Auto</p>
      </div>
    </div>

#### 12 columns

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

- `is-2`
- `is-3`
- `is-4`
- `is-5`
- `is-6`
- `is-7`
- `is-8`
- `is-9`
- `is-10`
- `is-11`

Naming

Each modifier class is named after how many columns you want out of 12. So if you want 7 columns out of 12, use `is-7`.

`is-2`

1

1

1

1

1

1

1

1

1

1

`is-3`

1

1

1

1

1

1

1

1

1

`is-4`

1

1

1

1

1

1

1

1

`is-5`

1

1

1

1

1

1

1

`is-6`

1

1

1

1

1

1

`is-7`

1

1

1

1

1

`is-8`

1

1

1

1

`is-9`

1

1

1

`is-10`

1

1

`is-11`

1

### Offset

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`:

`is-half`
`is-offset-one-quarter`

`is-4`
`is-offset-8`

`is-11`
`is-offset-1`

    <div class="columns is-mobile">
      <div class="column is-half is-offset-one-quarter"></div>
    </div>

    <div class="columns is-mobile">
      <div class="column is-4 is-offset-8"></div>
    </div>

    <div class="columns is-mobile">
      <div class="column is-11 is-offset-1"></div>
    </div>

### Responsiveness

By default, columns are only activated from tablet onwards. This means columns are stacked on top of each other on mobile.

If you want columns to work on mobile too, just add the `is-mobile` modifier on the `columns` container:

1

2

3

4

    <div class="columns is-mobile">
      <div class="column">1</div>
      <div class="column">2</div>
      <div class="column">3</div>
      <div class="column">4</div>
    </div>

Resize

If you want to see the difference, resize your browser and see when the columns are stacked and when they are horizontally distributed.

If you only want columns on desktop, just use the `is-desktop` modifier on the `columns` container:

1

2

3

4

    <div class="columns is-desktop">
      <div class="column">1</div>
      <div class="column">2</div>
      <div class="column">3</div>
      <div class="column">4</div>
    </div>

#### Different sizes per breakpoint

You can define a column size for each viewport size: mobile, tablet, and desktop.

`is-half-mobile`
`is-one-third-tablet`
`is-one-quarter-desktop`

1

1

1

1

Resize

If you want to see these classes in action, resize your browser window and see how the same column varies in width at each breakpoint.

    <div class="columns is-mobile">
      <div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop">
        <code>is-half-mobile</code><br>
        <code>is-one-third-tablet</code><br>
        <code>is-one-quarter-desktop</code>
      </div>
      <div class="column">1</div>
      <div class="column">1</div>
      <div class="column">1</div>
      <div class="column">1</div>
    </div>

### Nesting

You can nest columns to have more flexibility in your design. You only need to follow this structure:

- `columns`: top-level columns container
  - `column`
    - `columns`: nested columns
      - `column` and so on…

The difference with multiline columns is the order in the HTML code: all the blue columns appear before the red ones. Resize to a narrower viewport to see the result.

First column

First nested column

Second nested column

Second column

50%

Auto

Auto

    <div class="columns">
      <div class="column">
        First column
        <div class="columns is-mobile">
          <div class="column">
            First nested column
          </div>
          <div class="column">
            Second nested column
          </div>
        </div>
      </div>
      <div class="column">
        Second column
        <div class="columns is-mobile">
          <div class="column is-half">
            50%
          </div>
          <div class="column">
            Auto
          </div>
          <div class="column">
            Auto
          </div>
        </div>
      </div>
    </div>

### Multiline

Whenever you want to start a new line, you can close a `columns` container and start a new one. But you can also add the `is-multiline` modifier and add more column elements that would fit in a single row.

`is-one-quarter`

`is-one-quarter`

`is-one-quarter`

`is-one-quarter`

`is-half`

`is-one-quarter`

`is-one-quarter`

`is-one-quarter`

Auto

    <div class="columns is-multiline is-mobile">
      <div class="column is-one-quarter">
        <code>is-one-quarter</code>
      </div>
      <div class="column is-one-quarter">
        <code>is-one-quarter</code>
      </div>
      <div class="column is-one-quarter">
        <code>is-one-quarter</code>
      </div>
      <div class="column is-one-quarter">
        <code>is-one-quarter</code>
      </div>
      <div class="column is-half">
        <code>is-half</code>
      </div>
      <div class="column is-one-quarter">
        <code>is-one-quarter</code>
      </div>
      <div class="column is-one-quarter">
        <code>is-one-quarter</code>
      </div>
      <div class="column">
        Auto
      </div>
    </div>

### Gapless

If you want to remove the space between the columns, add the `is-gapless` modifier on the `columns` container:

First column

Second column

Third column

Fourth column

    <div class="columns is-gapless">
      <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>

You can combine it with the `is-multiline` modifier:

`is-one-quarter`

`is-one-quarter`

`is-one-quarter`

`is-one-quarter`

`is-half`

`is-one-quarter`

`is-one-quarter`

`is-one-quarter`

Auto

    <div class="columns is-gapless is-multiline is-mobile">
      <div class="column is-one-quarter">
        <code>is-one-quarter</code>
      </div>
      <div class="column is-one-quarter">
        <code>is-one-quarter</code>
      </div>
      <div class="column is-one-quarter">
        <code>is-one-quarter</code>
      </div>
      <div class="column is-one-quarter">
        <code>is-one-quarter</code>
      </div>
      <div class="column is-half">
        <code>is-half</code>
      </div>
      <div class="column is-one-quarter">
        <code>is-one-quarter</code>
      </div>
      <div class="column is-one-quarter">
        <code>is-one-quarter</code>
      </div>
      <div class="column">
        Auto
      </div>
    </div>

### Narrow column

If you want a column to only take the space it needs, use the `is-narrow` modifier. The other column(s) will fill up the remaining space.

Narrow column

This column is only 200px wide.

Flexible column

This column will take up the remaining space available.

    <div class="columns">
      <div class="column is-narrow">
        <div class="box" style="width: 200px;">
          <p class="title is-5">Narrow column</p>
          <p class="subtitle">This column is only 200px wide.</p>
        </div>
      </div>
      <div class="column">
        <div class="box">
          <p class="title is-5">Flexible column</p>
          <p class="subtitle">This column will take up the remaining space available.</p>
        </div>
      </div>
    </div>

As for the size modifiers, you can have narrow columns for different breakpoints:

- `is-narrow-mobile`
- `is-narrow-tablet`
- `is-narrow-desktop`

Bulma Partners

Check out their products!

Bulma Newsletter

Get notified when v1 is ready!