Layout
Mobile-first breakpoints, centered containers, Bootstrap flex rows, and a CSS grid track system.
Breakpoints
| Infix | Min-width | Examples |
|---|---|---|
| (none) | 0 | p-4 d-none grid-2 |
| sm | 576px | p-sm-4 grid-sm-2 |
| md | 768px | d-md-flex col-md-6 |
| lg | 992px | grid-lg-3 |
| xl | 1200px | d-xl-none |
| xxl | 1400px | col-xxl-4 |
<div class="d-none d-md-block">Visible from md</div>
Containers
container grows 540 / 720 / 960 / 1140 / 1320. Use container-sm … container-xxl to start later. container-fluid is full width with gutters.
<div class="container">…</div> <div class="container-fluid">…</div>
Flex row grid
Bootstrap-style .row + .col-* with gutter variables --tg-gutter-x.
<div class="row g-3"> <div class="col-12 col-md-6">A</div> <div class="col-12 col-md-6">B</div> </div>
col-md-6
col-md-6
Columns (CSS grid)
<div class="grid grid-12 g-3"> <div class="col-12 col-md-4">…</div> </div>
col-md-4
col-md-4
col-md-4
Gutters
g-*, gx-*, gy-* on rows or grids. Values follow --spacing.
g-4
g-4
Z-index
Utilities: z-0 z-sticky z-overlay z-dropdown.
<header class="tg-nav nav-sticky z-sticky">…</header>
CSS Grid tracks
grid-md-3 creates three equal tracks from 768px. Use with gap-3.
1
2
3
<div class="grid grid-md-3 gap-4">…</div>