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

Documentation

Everything you need to create a website with Bulma

# Column options

## Design different types of column layouts

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

### Centering columns #

While you can use empty columns (like `<div class="column"></div>`) to create horizontal space around `.column` elements, you can also use `.is-centered` on the parent `.columns` element:

`is-half`
`is-narrow`

    <div class="columns is-mobile is-centered">
      <div class="column is-half is-narrow">
        <p class="bd-notification is-info">
          <code class="html">is-half</code><br>
          <code class="html">is-narrow</code>
        </p>
      </div>
    </div>

Use with `.is-multiline` to create a flexible, centered list (try resizing to see centering in different viewport sizes):

`is-narrow`
First Column

`is-narrow`
Our Second Column

`is-narrow`
Third Column

`is-narrow`
The Fourth Column

`is-narrow`
Fifth Column

    <div class="columns is-mobile is-multiline is-centered">
      <div class="column is-narrow">
        <p class="bd-notification is-info">
          <code class="html">is-narrow</code><br>
          First Column
        </p>
      </div>
      <div class="column is-narrow">
        <p class="bd-notification is-success">
          <code class="html">is-narrow</code><br>
          Our Second Column
        </p>
      </div>
      <div class="column is-narrow">
        <p class="bd-notification is-danger">
          <code class="html">is-narrow</code><br>
          Third Column
        </p>
      </div>
      <div class="column is-narrow">
        <p class="bd-notification is-info">
          <code class="html">is-narrow</code><br>
          The Fourth Column
        </p>
      </div>
      <div class="column is-narrow">
        <p class="bd-notification is-success">
          <code class="html">is-narrow</code><br>
          Fifth Column
        </p>
      </div>
    </div>

This page is open source. Noticed a typo? Or something unclear? Improve this page on GitHub

Bulma Partners

Check out their products!

Bulma Newsletter

Get notified when v1 is ready!