--- title: Column sizes layout: documentation doc-tab: columns doc-subtab: sizes --- {% capture columns_sizes %}
is-three-quarters
Auto
Auto
is-two-thirds
Auto
Auto
is-half
Auto
Auto
is-one-third
Auto
Auto
is-one-quarter
Auto
{% endcapture %} {% capture columns_offset %}
{% endcapture %} {% capture columns_narrow %}

Narrow column

This column is only 200px wide.

Flexible column

This column will take up the remaining space available.

{% endcapture %} {% include subnav-columns.html %}

Column sizes

Define the size of each column individually

If you want to change the size of a single column, you can use one of 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

{% highlight html %}{{ columns_sizes }}{% endhighlight %}
{% include anchor.html name="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

{% include anchor.html name="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

{% highlight html %}{{ columns_offset }}{% endhighlight %} {% include anchor.html name="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.

{% highlight html %}{{ columns_narrow }}{% endhighlight %}

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

  • is-narrow-mobile
  • is-narrow-tablet
  • is-narrow-desktop