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 sizes

## Define the size of each column individually

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">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-half">is-half</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>

### 12 columns system #

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 convention

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>

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

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!