UIGrid and layout
Containers, rows and columns that arrange content and adapt it to the width of the screen.
The grid has twelve columns and five breakpoints. A row holds columns that share its width; each column says how many of the twelve it takes at each breakpoint. Content stacks on small screens and sits side by side on wide ones.
When to use it
Use it
- Design for the small screen first and add columns as the width grows.
- Keep the sum of the columns of a row at 12.
- Use the same gutters in the whole page.
Don't
- Nest more than two levels of rows.
- Use fixed widths in pixels for columns.
- Use the grid to align a single control; use spacing.
Anatomy
A container (container, container-fluid) holds rows (row) that hold columns (col, col-md-6…). The gap between columns is the gutter.
Variants and states
This Moodle version has no dark mode: examples stay light.
Combinations
| Combination | Use it for |
|---|---|
| Columns × breakpoints | col-12 col-md-6 col-lg-4: one column on a phone, two on a tablet, three on a desktop. |
| Row × gutters | Keep the same gutters (g-3) in the whole page. |
| Container × width | container for pages, container-fluid for tools that use the whole screen. |
What Didactika changes and why
| What we changed | Why it helps |
|---|---|
| The grid is untouched | Layout is the one thing every plugin shares with Bootstrap and with Moodle’s own pages, so Didactika does not change it. |
Classes
| Class | What it does |
|---|---|
container, container-fluid |
Fixed-width and full-width wrapper |
row |
A horizontal group of columns |
col, col-6, col-md-4 |
A column: automatic, 6 of 12, 4 of 12 from the medium breakpoint |
g-0, g-3no-gutters |
Gutter between columns |
In this version
Bootstrap 5.3 keeps its colours in CSS variables (--bs-*), so a theme recolours the component with one variable. The gutter is set with g-*.
Bootstrap 4.6 compiles its colours into the classes, so a theme recolours the component by rebuilding its stylesheet. The gutter is removed with no-gutters.
Bootstrap 4.6 compiles its colours into the classes, so a theme recolours the component by rebuilding its stylesheet. The gutter is removed with no-gutters.
Accessibility
- The reading order is the order in the markup: do not rely on the grid to reorder what matters.
- Content must still make sense when it stacks.
- Never require horizontal scrolling at 320 px wide.