The 12-column responsive grid: rows and columns, breakpoints, offsets, ordering, gutters, row columns, nesting and alignment. Tinted boxes show exactly how each column behaves.
1Equal-width columns
Plain col classes share the row width equally, whatever their number.
col
col
col
col
col
<div class="tl-grid">
<div class="row">
<div class="col">
<div class="tl-box">
col
</div>
</div>
<div class="col">
<div class="tl-box">
col
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="tl-box">
col
</div>
</div>
<div class="col">
<div class="tl-box">
col
</div>
</div>
<div class="col">
<div class="tl-box">
col
</div>
</div>
</div>
</div>2Twelve-column spans
col-* numbers say how many of the 12 columns a column spans.
col-4
col-8
col-3
col-6
col-3
2
col-10
<div class="tl-grid">
<div class="row">
<div class="col-4">
<div class="tl-box">
col-4
</div>
</div>
<div class="col-8">
<div class="tl-box">
col-8
</div>
</div>
</div>
<div class="row">
<div class="col-3">
<div class="tl-box">
col-3
</div>
</div>
<div class="col-6">
<div class="tl-box">
col-6
</div>
</div>
<div class="col-3">
<div class="tl-box">
col-3
</div>
</div>
</div>
<div class="row">
<div class="col-2">
<div class="tl-box">
2
</div>
</div>
<div class="col-10">
<div class="tl-box">
col-10
</div>
</div>
</div>
</div>3Breakpoint columns
col-sm-* stacks on phones and goes horizontal from 576px up.
col-sm-4
col-sm-4
col-sm-4
<div class="tl-grid">
<div class="row g-2">
<div class="col-sm-4">
<div class="tl-box">
col-sm-4
</div>
</div>
<div class="col-sm-4">
<div class="tl-box">
col-sm-4
</div>
</div>
<div class="col-sm-4">
<div class="tl-box">
col-sm-4
</div>
</div>
</div>
</div>4Mix and match
Different spans per breakpoint: full width, then 8 / 4, then 6 / 6.
col-12 col-md-8 col-xl-6
col-12 col-md-4 col-xl-6
col-6 col-md-4
col-6 col-md-4
col-12 col-md-4
<div class="tl-grid">
<div class="row g-2">
<div class="col-12 col-md-8 col-xl-6">
<div class="tl-box">
col-12 col-md-8 col-xl-6
</div>
</div>
<div class="col-12 col-md-4 col-xl-6">
<div class="tl-box">
col-12 col-md-4 col-xl-6
</div>
</div>
</div>
<div class="row g-2">
<div class="col-6 col-md-4">
<div class="tl-box">
col-6 col-md-4
</div>
</div>
<div class="col-6 col-md-4">
<div class="tl-box">
col-6 col-md-4
</div>
</div>
<div class="col-12 col-md-4">
<div class="tl-box">
col-12 col-md-4
</div>
</div>
</div>
</div>5Auto-width columns
col-auto sizes a column to its content; plain col takes the rest.
col-auto
col - fills the remaining space
col-auto
<div class="tl-grid">
<div class="row g-2">
<div class="col-auto">
<div class="tl-box">
col-auto
</div>
</div>
<div class="col">
<div class="tl-box">
col - fills the remaining space
</div>
</div>
<div class="col-auto">
<div class="tl-box">
col-auto
</div>
</div>
</div>
</div>6Variable width content
col-md-auto fits content from md up while neighbours share the remaining space.
col col-lg-2
Variable width: Train smarter, feel better
col col-lg-2
<div class="tl-grid">
<div class="row g-2 justify-content-md-center">
<div class="col col-lg-2">
<div class="tl-box">
col col-lg-2
</div>
</div>
<div class="col-md-auto">
<div class="tl-box">
Variable width: Train smarter, feel better
</div>
</div>
<div class="col col-lg-2">
<div class="tl-box">
col col-lg-2
</div>
</div>
</div>
</div>7Offsets
offset-* pushes a column to the right by a number of grid columns.
col-md-4
offset-md-4
offset-md-3
offset-md-3
col-md-6 offset-md-3
<div class="tl-grid">
<div class="row">
<div class="col-md-4">
<div class="tl-box">
col-md-4
</div>
</div>
<div class="col-md-4 offset-md-4">
<div class="tl-box">
offset-md-4
</div>
</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">
<div class="tl-box">
offset-md-3
</div>
</div>
<div class="col-md-3 offset-md-3">
<div class="tl-box">
offset-md-3
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">
<div class="tl-box">
col-md-6 offset-md-3
</div>
</div>
</div>
</div>8Order classes
order-* changes the visual order without touching the markup order.
First in DOM, no order
Second in DOM, order-5
Third in DOM, order-1
<div class="tl-grid">
<div class="row g-2">
<div class="col">
<div class="tl-box">
First in DOM, no order
</div>
</div>
<div class="col order-5">
<div class="tl-box">
Second in DOM, order-5
</div>
</div>
<div class="col order-1">
<div class="tl-box">
Third in DOM, order-1
</div>
</div>
</div>
</div>9First and last
order-first and order-last move single columns to either end, here from md up.
1st - order-md-last
2nd - unordered
3rd - order-md-first
<div class="tl-grid">
<div class="row g-2">
<div class="col-md order-md-last">
<div class="tl-box">
1st - order-md-last
</div>
</div>
<div class="col-md">
<div class="tl-box">
2nd - unordered
</div>
</div>
<div class="col-md order-md-first">
<div class="tl-box">
3rd - order-md-first
</div>
</div>
</div>
</div>10No gutters
g-0 removes the gaps between columns, useful for image mosaics and tight cards.
g-0
g-0
g-0
g-0
<div class="tl-grid">
<div class="row g-0">
<div class="col-6 col-md-3">
<div class="tl-box">
g-0
</div>
</div>
<div class="col-6 col-md-3">
<div class="tl-box">
g-0
</div>
</div>
<div class="col-6 col-md-3">
<div class="tl-box">
g-0
</div>
</div>
<div class="col-6 col-md-3">
<div class="tl-box">
g-0
</div>
</div>
</div>
</div>11Gutter sizes
g-*, gx-* and gy-* set both, horizontal or vertical gaps from 0 to 5.
gx-5
col
col
gy-3 (wrapping)
col-6
col-6
col-6
col-6
g-1
col-4
col-4
col-4
<div class="tl-grid">
<p class="small text-body-secondary mb-1">gx-5</p>
<div class="row gx-5">
<div class="col">
<div class="tl-box">
col
</div>
</div>
<div class="col">
<div class="tl-box">
col
</div>
</div>
</div>
<p class="small text-body-secondary mt-3 mb-1">gy-3 (wrapping)</p>
<div class="row gy-3">
<div class="col-6">
<div class="tl-box">
col-6
</div>
</div>
<div class="col-6">
<div class="tl-box">
col-6
</div>
</div>
<div class="col-6">
<div class="tl-box">
col-6
</div>
</div>
<div class="col-6">
<div class="tl-box">
col-6
</div>
</div>
</div>
<p class="small text-body-secondary mt-3 mb-1">g-1</p>
<div class="row g-1">
<div class="col-4">
<div class="tl-box">
col-4
</div>
</div>
<div class="col-4">
<div class="tl-box">
col-4
</div>
</div>
<div class="col-4">
<div class="tl-box">
col-4
</div>
</div>
</div>
</div>12Row columns
row-cols-* sets the number of columns per row on the row itself: 1, 2 then 4.
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
<div class="tl-grid">
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 g-2">
<div class="col">
<div class="tl-box">
Item 1
</div>
</div>
<div class="col">
<div class="tl-box">
Item 2
</div>
</div>
<div class="col">
<div class="tl-box">
Item 3
</div>
</div>
<div class="col">
<div class="tl-box">
Item 4
</div>
</div>
<div class="col">
<div class="tl-box">
Item 5
</div>
</div>
<div class="col">
<div class="tl-box">
Item 6
</div>
</div>
<div class="col">
<div class="tl-box">
Item 7
</div>
</div>
<div class="col">
<div class="tl-box">
Item 8
</div>
</div>
</div>
</div>13Auto row columns
row-cols-auto lets every column take its natural width and wrap.
tutorial
design
update
release
tips
guide
case study
<div class="tl-grid">
<div class="row row-cols-auto g-2">
<div class="col">
<div class="tl-box">
tutorial
</div>
</div>
<div class="col">
<div class="tl-box">
design
</div>
</div>
<div class="col">
<div class="tl-box">
update
</div>
</div>
<div class="col">
<div class="tl-box">
release
</div>
</div>
<div class="col">
<div class="tl-box">
tips
</div>
</div>
<div class="col">
<div class="tl-box">
guide
</div>
</div>
<div class="col">
<div class="tl-box">
case study
</div>
</div>
</div>
</div>14Nesting
Put a new row inside a column to split it again into 12 columns.
col-sm-3
col-sm-9
nested col-8 col-sm-6
nested col-4 col-sm-6
<div class="tl-grid">
<div class="row g-2">
<div class="col-sm-3">
<div class="tl-box h-100">
col-sm-3
</div>
</div>
<div class="col-sm-9">
<div class="tl-box tl-box-alt">
col-sm-9
<div class="row g-2 mt-1">
<div class="col-8 col-sm-6">
<div class="tl-box">
nested col-8 col-sm-6
</div>
</div>
<div class="col-4 col-sm-6">
<div class="tl-box">
nested col-4 col-sm-6
</div>
</div>
</div>
</div>
</div>
</div>
</div>15Vertical alignment
align-items-start, -center and -end align all columns inside a taller row.
One
Two
Three
One
Two
Three
One
Two
Three
<div class="tl-grid">
<div class="row g-2 tl-tall border rounded-3 p-1 align-items-start">
<div class="col">
<div class="tl-box">
One
</div>
</div>
<div class="col">
<div class="tl-box">
Two
</div>
</div>
<div class="col">
<div class="tl-box">
Three
</div>
</div>
</div>
<div class="row g-2 tl-tall border rounded-3 p-1 align-items-center">
<div class="col">
<div class="tl-box">
One
</div>
</div>
<div class="col">
<div class="tl-box">
Two
</div>
</div>
<div class="col">
<div class="tl-box">
Three
</div>
</div>
</div>
<div class="row g-2 tl-tall border rounded-3 p-1 align-items-end">
<div class="col">
<div class="tl-box">
One
</div>
</div>
<div class="col">
<div class="tl-box">
Two
</div>
</div>
<div class="col">
<div class="tl-box">
Three
</div>
</div>
</div>
</div>16Horizontal alignment
justify-content-* distributes narrower columns along the row.
start
start
center
center
end
end
between
between
around
around
evenly
evenly
<div class="tl-grid">
<div class="row justify-content-start">
<div class="col-3">
<div class="tl-box">
start
</div>
</div>
<div class="col-3">
<div class="tl-box">
start
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-3">
<div class="tl-box">
center
</div>
</div>
<div class="col-3">
<div class="tl-box">
center
</div>
</div>
</div>
<div class="row justify-content-end">
<div class="col-3">
<div class="tl-box">
end
</div>
</div>
<div class="col-3">
<div class="tl-box">
end
</div>
</div>
</div>
<div class="row justify-content-between">
<div class="col-3">
<div class="tl-box">
between
</div>
</div>
<div class="col-3">
<div class="tl-box">
between
</div>
</div>
</div>
<div class="row justify-content-around">
<div class="col-3">
<div class="tl-box">
around
</div>
</div>
<div class="col-3">
<div class="tl-box">
around
</div>
</div>
</div>
<div class="row justify-content-evenly">
<div class="col-3">
<div class="tl-box">
evenly
</div>
</div>
<div class="col-3">
<div class="tl-box">
evenly
</div>
</div>
</div>
</div>17Self alignment
align-self-* aligns single columns differently from the rest of the row.
align-self-start
align-self-center
align-self-end
<div class="tl-grid">
<div class="row g-2 tl-tall border rounded-3 p-1">
<div class="col align-self-start">
<div class="tl-box">
align-self-start
</div>
</div>
<div class="col align-self-center">
<div class="tl-box">
align-self-center
</div>
</div>
<div class="col align-self-end">
<div class="tl-box">
align-self-end
</div>
</div>
</div>
</div>18Column wrapping and breaks
Columns over 12 wrap to a new line; a w-100 element forces a break.
col-9
col-4 (wraps)
col-6
col-6 col-sm-3
col-6 col-sm-3
after break
after break
<div class="tl-grid">
<div class="row g-2">
<div class="col-9">
<div class="tl-box">
col-9
</div>
</div>
<div class="col-4">
<div class="tl-box">
col-4 (wraps)
</div>
</div>
<div class="col-6">
<div class="tl-box">
col-6
</div>
</div>
</div>
<div class="row g-2">
<div class="col-6 col-sm-3">
<div class="tl-box">
col-6 col-sm-3
</div>
</div>
<div class="col-6 col-sm-3">
<div class="tl-box">
col-6 col-sm-3
</div>
</div>
<div class="w-100">
</div>
<div class="col-6 col-sm-3">
<div class="tl-box">
after break
</div>
</div>
<div class="col-6 col-sm-3">
<div class="tl-box">
after break
</div>
</div>
</div>
</div>19Margin utilities
ms-auto and me-auto push columns away from each other.
col-md-4
col-md-4 ms-auto
col-auto me-auto
col-auto
<div class="tl-grid">
<div class="row g-2">
<div class="col-md-4">
<div class="tl-box">
col-md-4
</div>
</div>
<div class="col-md-4 ms-auto">
<div class="tl-box">
col-md-4 ms-auto
</div>
</div>
</div>
<div class="row g-2">
<div class="col-auto me-auto">
<div class="tl-box">
col-auto me-auto
</div>
</div>
<div class="col-auto">
<div class="tl-box">
col-auto
</div>
</div>
</div>
</div>20Dashboard layout
A sidebar column and a content column with KPI tiles nested inside - all from the same grid.
Sidebar
col-lg-3
col-lg-3
Members
2.4k
Check-ins
62.5k
Classes booked
49.1k
Retention
34.4k
Chart - col-md-8
Activity - col-md-4
<div class="tl-grid">
<div class="row g-2">
<div class="col-lg-3">
<div class="tl-box tl-box-alt h-100">
Sidebar<br>col-lg-3
</div>
</div>
<div class="col-lg-9">
<div class="row g-2">
<div class="col-6 col-xl-3">
<div class="tl-box text-start">
<div class="small">
Members
</div>
<div class="fs-5 fw-semibold">
2.4k
</div>
</div>
</div>
<div class="col-6 col-xl-3">
<div class="tl-box text-start">
<div class="small">
Check-ins
</div>
<div class="fs-5 fw-semibold">
62.5k
</div>
</div>
</div>
<div class="col-6 col-xl-3">
<div class="tl-box text-start">
<div class="small">
Classes booked
</div>
<div class="fs-5 fw-semibold">
49.1k
</div>
</div>
</div>
<div class="col-6 col-xl-3">
<div class="tl-box text-start">
<div class="small">
Retention
</div>
<div class="fs-5 fw-semibold">
34.4k
</div>
</div>
</div>
<div class="col-md-8">
<div class="tl-box" style="min-height: 6rem;">
Chart - col-md-8
</div>
</div>
<div class="col-md-4">
<div class="tl-box h-100">
Activity - col-md-4
</div>
</div>
</div>
</div>
</div>
</div>