Breakpoints and columns
Breakpoints
The design system is built using the Bootstrap 5 framework. As such, the system employs the following default bootstrap breakpoints.
Breakpoint | Class infix | Dimensions |
---|---|---|
X-Small | None | <576px |
Small | sm | ≥576px |
Medium | md | ≥768px |
Large | lg | ≥992px |
Extra large | xl | ≥1200px |
Extra extra large | xxl | ≥1400px |
For screens <768px width (i.e. Small and X-small breakpoints), both the typography and spacing systems use smaller sizes. An example:

More detail is available on the Typography and Spacing pages.
Analytics for the Learning lab website revealed the following for calendar year of 2023:
- 75% of users are on desktop, 25% mobile
- Desktop screens less than 1280px in width account for less than 5% of all users
The development focus should be on Extra extra large, Extra large and X-small breakpoints (95% of all users use these breakpoints)
Columns
The design system uses Bootstrap 5’s column grid: 12 columns with 24px gutters (12px left and right)

Screens ≥1200px width
At breakpoints Extra Large and Extra extra large, a two column layout is used for content and navigation. It’s recommended to restrict page content to 8 columns wide even if no right navigation is present. This keeps the line length readable and easily scannable.

<div class="container-md">
<div class="row">
<div class="col-xl-8">
<! --Page content -->
</div>
<div class="col-xl-4">
<! --Right nav -->
</div>
</div>
</div>
Screens <1200px
At breakpoints X-Small, Small, Medium, Large, the optional right nav drops below page content.

Breakpoint | Page content |
---|---|
X-Small | 100% (-12px left and right) |
Small | 100% (-12px left and right) |
Medium | 696px |
Large | 936px |