Canvas Builder — Bootstrap 5 Setup¶

Bootstrap 5 does not generate responsive variants for color utilities out of the box. Canvas Builder's Bootstrap 5 profile stores one class per viewport using Bootstrap's infix convention:

Canvas viewport	Bootstrap infix	Example
Mobile (base)	(none)	`bg-primary`
Tablet	`-md-`	`bg-md-primary`
Desktop	`-lg-`	`bg-lg-primary`
Large Desktop	`-xl-`	`bg-xl-primary`

All four classes are applied to the element simultaneously; Bootstrap's @media breakpoints ensure only the correct one takes effect.

SCSS: Enable responsive color utilities¶

Before Bootstrap's utilities/api import, opt color utilities into responsive generation:

@use "sass:map";

$utilities: map.merge($utilities, (
  "background-color": map.merge(map.get($utilities, "background-color"), (responsive: true)),
  "color":            map.merge(map.get($utilities, "color"), (responsive: true)),
));

Import order in your entry point:

@import "bootstrap/scss/utilities";       // 1. Bootstrap builds $utilities map
@import "abstracts/utilities";            // 2. Merge responsive: true
@import "bootstrap/scss/utilities/api";   // 3. Bootstrap generates all classes

$grid-breakpoints must include md, lg, and xl (or whichever viewports you have enabled):

$grid-breakpoints: (xs: 0, md: 768px, lg: 992px, xl: 1200px);

Text-alignment (text-start, text-md-start, …) is already responsive in Bootstrap 5 — no extra SCSS needed.

Layout class maps¶

The shipped Bootstrap 5 profile pre-fills the layout matrices (General → Sections / Columns) using the same infix convention:

Viewport	Infix	Example
Mobile	(none)	`justify-content-start`
Tablet	`-md-`	`justify-content-md-start`
Desktop	`-lg-`	`justify-content-lg-start`
Large Desktop	`-xl-`	`justify-content-xl-start`

Known blanks (Bootstrap misfits): section.height → fit has no Bootstrap fit-content utility and stays blank (the structural cb-section--h-fit class carries it). section.container_type is base-only by design but is mapped. columns.count rows are stored but never emitted — see FRAMEWORKS.md. grid.grid_halign (grid-mode horizontal alignment) has no row at all — Bootstrap 5.3 ships no justify-items-* utility, so it stays on the --cb-grid-halign CSS custom property under this profile; the settings-form guard detects the missing map and falls back cleanly with no gate attribute stamped. grid.grid_valign and columns.valign/columns.halign are emitted as real, per-viewport, mode-resolved classes (align-items-* / justify-content-*) on .cb-columns — Canvas Builder resolves which mode (columns vs. grid) is active at each viewport and only stamps the matching family's classes, so it is safe to configure both.

Logical spacing sides. The Bootstrap profile ships spacing_side_map with right: e / left: s, so the box-model editor derives Bootstrap's logical pe-3 / ps-3 (not pr-/pl-) from an all-sides p-3 row. Keep padding/margin table rows as all-sides classes only.

Custom colors¶

Add entries to $theme-colors before Bootstrap's variables import:

$theme-colors: (
  "primary":   #1a56db,
  "brand":     #ff5722,
  // ...
);

Bootstrap's utility API picks them up automatically. Then update Administration → Canvas Builder → Styles to add matching option rows for your new colors.

Exporting / importing your classes¶

Bootstrap ships its utilities in compiled CSS, so there is no per-build "safelist" step like Tailwind's — but the responsive color utilities and any custom $theme-colors above must be opted in at SCSS build time (sections above). Your Canvas Builder style tables tell you exactly which utilities/colors the build must include.

To move the class configuration itself between sites, use config sync — the style tables and layout maps live in canvas_builder.settings:

drush config:export   # then config:import on the target site

See FRAMEWORKS.md → Exporting & importing classes.