Breakpoints and columns

Breakpoints

The design system is built using the Bootstrap 5 framework. As such, the system employs the following default bootstrap breakpoints.

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.