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

Documentation

Everything you need to create a website with Bulma

# Columns gap

## Customize the gap between the columns

### Default gap #

Each column has a gap equal to the variable `$column-gap`, which has a default value of `0.75rem`.
Since the gap is on each side of a column, the gap between two adjacent columns will be twice the value of `$column-gap`, or `1.5rem` by default.

Default gap

Default gap

Default gap

Default gap

### 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">
        No gap
      </div>
      <div class="column">
        No gap
      </div>
      <div class="column">
        No gap
      </div>
      <div class="column">
        No gap
      </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">
        is-one-quarter
      </div>
      <div class="column is-one-quarter">
        is-one-quarter
      </div>
      <div class="column is-one-quarter">
        is-one-quarter
      </div>
      <div class="column is-one-quarter">
        is-one-quarter
      </div>
      <div class="column is-half">
        is-half
      </div>
      <div class="column is-one-quarter">
        is-one-quarter
      </div>
      <div class="column is-one-quarter">
        is-one-quarter
      </div>
      <div class="column">
        Auto
      </div>
    </div>

### Variable gap #

Experimental
New 0.5.2

You can specify a custom column gap by appending one of 9 modifiers on the `.columns` container.

- `is-0` will remove any gap (similar to `is-gapless`)
- `is-3` is the default value, equivalent to the `0.75rem` value
- `is-8` is the maximum gap of `2rem`

Additionally, `.is-variable` should be added on the `.columns` container.

Gap: `` is-0 is-1 is-2 is-3 is-4 is-5 is-6 is-7 is-8
Side
Main
Three columns
Three columns
Three columns
1
2
3
4
5
6
7
8
9
10
11
12

This feature is only available in browsers that support CSS Variables:

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!