Grid

container, row and col: the three levels everyone already knows, on flexbox with a native gap.

Columns

Twelve columns by default. col-6 is half, col-4 a third. Every column goes full width below sm.

col-8

col-4

Example.jsx

<div className='container'>
  <div className='row flex-16'>
    <div className='col-8'>col-8</div>
    <div className='col-4'>col-4</div>
  </div>
</div>

Gap

The gap is written on the row: row flex-24. flex-24-40 sets 24px between columns and 40px between rows. Each column subtracts its share of the gap, so the row never wraps by accident.

Equal and auto

col

col-auto

Example.jsx

<div className='row flex-16'>
  <div className='col'>col</div>
  <div className='col'>col</div>
  <div className='col-auto'>col-auto</div>
</div>

Classes

Class	What it does
`container`	centred, max-width $content, $gutter on the sides
`container fluid`	full width, no side padding
`row`	display: flex, wraps
`col-1 … col-12`	N of $columns, minus its share of the gap
`col`	equal share of the row
`col-auto`	as wide as its content
`flex-N`	display: flex with an N px gap, 0–160, step 4
`flex-X-Y`	column gap X, row gap Y, up to 64

A layout that changes on tablets says so in its component Sass with the =v-* mixins. There are no breakpoint classes like col-md-6.