Columns

Arrange your elements into rows and columns using the utility system is-row and is-col-{n}. This system is based on 12 columns, allowing you to build flexible and consistent layouts.

Basic usage

Wrap your columns inside a container with the class is-row and define the width of each element using is-col-{n}, where {n} is a number from 1 to 12.

Class	Description
is-col-1	Occupies 1/12 of the width (≈8.33%)
is-col-6	Occupies 6/12 of the width (50%)
is-col-12	Occupies 12/12 of the width (100%)

Col 12

Col 8

Col 4

Col 3

Col 3

Col 3

Col 3

Col 7

Col 3

Col 6

Col 6

<div class="is-row">
  <div class="is-col-12 is-bg-primary">Col 12</div>
  <div class="is-col-8 is-bg-primary">Col 8</div>
  <div class="is-col-4 is-bg-info">Col 4</div>
  <div class="is-col-3 is-bg-warning">Col 3</div>
  <div class="is-col-3 is-bg-error">Col 3</div>
  <div class="is-col-3 is-bg-warning">Col 3</div>
  <div class="is-col-3 is-bg-error">Col 3</div>
  <div class="is-col-7 is-bg-primary">Col 7</div>
  <div class="is-col-3 is-bg-info">Col 3</div>
  <div class="is-col-6 is-bg-warning">Col 6</div>
  <div class="is-col-6 is-bg-error">Col 6</div>
</div>

Column spacing

Spacing between columns is controlled with the class is-gap-{n}, where {n} is a number from 0 to 10.

Preview

Col 12

Col 8

Col 4

Col 3

Col 3

Col 3

Col 3

Code

<div class="is-row is-gap-6">
  <div class="is-col-8 is-bg-primary">Col 8</div>
  <div class="is-col-4 is-bg-info">Col 4</div>
  <div class="is-col-3 is-bg-warning">Col 3</div>
  <div class="is-col-3 is-bg-error">Col 3</div>
  <div class="is-col-3 is-bg-warning">Col 3</div>
  <div class="is-col-3 is-bg-error">Col 3</div>
</div>

Responsive

tip

For more details, visit the breakpoints documentation.

Examples

Class	Description
.md:is-col-6	Sets the component's width to a 6/12 ratio for screens larger than md.
.is-col-12 .md:is-col-4	Sets the component's width to a 12/12 ratio (i.e., 100%) for mobile screens and a 4/12 ratio when the screen is larger than md.