Options

Centering columns

There are a few ways to center your columns:

  • Create whitespace using empty columns (<div class="column"></div>).
  • Using column offsets.
  • Using the is-centered modifier on the columns container:

is-6

<div class="preview-wrapper">
    <div class="columns is-centered">
        <div class="column is-6">
            <code>is-6</code>
        </div>
    </div>
</div>

is-4

is-4

<div class="preview-wrapper">
    <div class="columns is-centered">
        <div class="column is-4">
            <code>is-4</code>
        </div>
        <div class="column is-4">
            <code>is-4</code>
        </div>
    </div>
</div>
← Layout →