Bootstrap Columns to CSS Grid & Flexbox
A practical cheat sheet for translating Bootstrap grid columns — col-md-6, col-4,
offset-*, order-* — into modern CSS Grid and Flexbox. Use it to modernise a legacy
layout, to understand what a Bootstrap class actually does, or to rebuild a page with the
UnysonPlus Div (which outputs clean flex/grid CSS instead of grid classes).
order (or the Div's Reverse Order) changes what a sighted mouse user sees first without moving
anything in the actual markup — but screen readers and keyboard Tab navigation still follow the
underlying source order. If a card's "Read more" link visually sits before its heading, someone
navigating by keyboard hears them in the opposite sequence. Keep visual order and DOM order aligned
whenever you can, and reserve order/reverse for cosmetic tweaks that don't change meaning.
MDN: CSS Flexbox and accessibility
Bootstrap's grid IS flexbox underneath. A .row is display:flex; flex-wrap:wrap, and each
col-* is just a flex-basis percentage. So most of this page is simply recognising what a
Bootstrap class already maps to in raw CSS — and where CSS Grid does the same job with less
math.
The structural pieces
| Bootstrap | CSS Flexbox | CSS Grid | UnysonPlus Div |
|---|---|---|---|
.container | max-width + margin-inline:auto | max-width + margin-inline:auto | Content Width option |
.row | display:flex; flex-wrap:wrap | display:grid; grid-template-columns:… | Display = Flex / Grid |
.col-* | a flex child with a flex-basis | a grid item (grid-column: span N) | a child Div's Width preset |
| gutters (column padding) | gap | gap | Gap |
.col (no number) | flex: 1 1 0 (equal fill) | a 1fr track | Auto width / Grow to Fill |
The full 12-column width map
Every Bootstrap column width is N / 12. Here is the complete translation to a percentage,
a Flexbox flex-basis, a CSS Grid span, and the UnysonPlus Div width preset:
| Bootstrap | Fraction | Width % | Flexbox flex | CSS Grid | Div preset |
|---|---|---|---|---|---|
col-1 | 1/12 | 8.333% | flex: 0 0 8.333% | grid-column: span 1 | 1 |
col-2 | 1/6 | 16.667% | flex: 0 0 16.667% | span 2 | 2 |
col-3 | 1/4 | 25% | flex: 0 0 25% | span 3 | 3 |
col-4 | 1/3 | 33.333% | flex: 0 0 33.333% | span 4 | 4 |
col-5 | 5/12 | 41.667% | flex: 0 0 41.667% | span 5 | 5 |
col-6 | 1/2 | 50% | flex: 0 0 50% | span 6 | 6 |
col-7 | 7/12 | 58.333% | flex: 0 0 58.333% | span 7 | 7 |
col-8 | 2/3 | 66.667% | flex: 0 0 66.667% | span 8 | 8 |
col-9 | 3/4 | 75% | flex: 0 0 75% | span 9 | 9 |
col-10 | 5/6 | 83.333% | flex: 0 0 83.333% | span 10 | 10 |
col-11 | 11/12 | 91.667% | flex: 0 0 91.667% | span 11 | 11 |
col-12 | 1/1 | 100% | flex: 0 0 100% | span 12 | 12 |
This exact map is what the UnysonPlus Site Converter uses when it rebuilds a source's rows as
flex Div rows — a source col-md-6 (or a measured 50% column) becomes a Div cell with width
preset 6. See Column widths & the grid.
Everything beyond width
| Bootstrap | Flexbox | CSS Grid |
|---|---|---|
offset-3 | margin-left: 25% | grid-column-start: 4 |
order-2 / order-last | order: 2 | order: 2 |
align-items-center (on .row) | align-items: center | align-items: center |
justify-content-between | justify-content: space-between | justify-content: space-between |
align-self-end (on a column) | align-self: end | align-self: end |
| a row of 3 that wraps | flex-wrap: wrap + basis 33.3% | grid-template-columns: repeat(3, 1fr) |
| equal-height columns | automatic (flex stretches) | automatic (grid stretches) |
Notice that the alignment property names are identical across Bootstrap utilities, Flexbox and
Grid — align-items, justify-content, align-self all carry over unchanged.
Flexbox vs CSS Grid — which to use
The most common question when leaving Bootstrap behind is "flexbox or grid?" A simple rule:
| You want… | Use | Why |
|---|---|---|
| A row that wraps to the next line when full | Flexbox | items keep their size and flow naturally |
| N equal columns (a true column layout) | CSS Grid | repeat(N, 1fr) — no percentage math, no wrap surprises |
| Items sized by their content (nav bar, tags, buttons) | Flexbox | flex: 0 0 auto or flex: 1 per item |
| A two-dimensional layout (rows and columns aligned) | CSS Grid | grid aligns both axes; flex controls only one |
| An uneven split like 8 / 4 | either | Grid: span 8 + span 4; Flex: basis 66.7% + 33.3% |
Rule of thumb: Flexbox is for one-dimensional flows (a row or a stack). CSS Grid is for two-dimensional layouts and for real "columns."
The display property: flex, grid, or block?
Bootstrap hides one CSS property behind its grid: display. It is the single most important
layout property in CSS — it decides how an element arranges its children. When you build with a
container (like the UnysonPlus Div) you choose it directly. There are three values you will
reach for:
display | What it does | Reach for it when… | Related properties |
|---|---|---|---|
flex | Lays children along one axis — a row (side by side) or a column (stacked). They can wrap, grow and shrink. | You want a row or a stack: nav bars, button groups, cards that wrap. | flex-direction, flex-wrap, justify-content, align-items, gap |
grid | Arranges children into a two-dimensional grid of columns (and rows). | You want real columns: a card grid, a gallery, N aligned columns. | grid-template-columns, gap, justify-content, align-items |
block | Normal document flow — each child stacks top-to-bottom on its own line (the default for a <div>). | You just want a plain wrapper and will let content flow normally. | (none — children simply flow) |
The mental model:
flex= one-dimensional → "a row or a stack."grid= two-dimensional → "N aligned columns." — the modern answer to "I want columns."block= no layout → "just flow, top to bottom."
The Div's Display option is exactly this CSS display property — Flex, Grid or
Block. Choose Grid and set Grid Columns for a column layout; Flex for a
one-dimensional row or stack; Block for a plain content wrapper. For an uneven split like
1/3 + 2/3, use Grid with grid-template-columns: 1fr 2fr.
Quick answers
What is the CSS Grid equivalent of col-md-6?
A grid item spanning half the tracks — grid-column: span 6 inside a 12-track grid, or simply one
cell of a grid-template-columns: repeat(2, 1fr) grid. As a width it is 50%.
What is col-4 in flexbox?
flex: 0 0 33.333% on the column, inside a display:flex; flex-wrap:wrap row.
How do I make 3 equal columns without Bootstrap?
display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; — that's it. No fraction
classes, no .row wrapper math.
Do I still need a .container?
Conceptually yes — you still want a centred max-width. In CSS that's max-width +
margin-inline:auto; in the UnysonPlus Div it is the Content Width option.
How do offsets work without offset-*?
Flexbox: margin-left (a percentage). CSS Grid: place the item with grid-column-start.
How this maps to the UnysonPlus Div
The UnysonPlus Div (a flexbox/grid container) is the modern replacement for Section → Row → Column authoring:
- Set the Div's Display to Grid and choose how many columns — that is your
.rowof equalcol-*cells, output as clean CSS Grid. - Set the Div's Display to Flex for one-dimensional rows and stacks that wrap.
- Each child Div's Width preset is the
Nfromcol-N(see the map above). - Content Width gives you the
.container(centred max-width).
The classic Section/Row/Column grid stays fully supported for existing pages — see the Page Builder Roadmap for how the two coexist.
See also
- Page Builder Roadmap — where the layout system is heading (Div-first, columns-as-grid)
- Column widths & the grid — twelfths, the single
1_5fifth, flex vs legacy wrapping - How the Page Builder works — the full data flow from a builder edit to rendered HTML