Resize the window to step through the configured breakpoints.
| Breakpoint | Activates at | Padding (top/bottom) | Fixed width | Columns |
|---|---|---|---|---|
| xs | 0px | 0px | 100% | 12 |
| sm | 200px | 12px | 180px | 6 |
| md | 400px | 28px | 360px | 4 |
| lg | 600px | 48px | 560px | 3 |
| xl | 800px | 72px | 760px | 2 |
| xxl | 1000px | 100px | 960px | 1 |
The default fixed widths (540px at sm, up to 1320px at xxl) are sized for the default thresholds. Moving the
thresholds down without also moving these widths would leave the grid wider than the screen, where
max-width: 100% clamps it, so they are overridden to match.
Each column spans xs 12, sm 6, md 4, lg 3, xl 2, xxl 1 of the 12 column grid, so the row goes from one column per line to twelve as the screen grows.