Bootstrap 5 setup¶

Wire up per-viewport color classes for Bootstrap 5's infix convention.

Overview¶

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)),
  // Generates bg-md-gradient / bg-lg-gradient / … for the gradient background
  // options. Omit this and a gradient renders at mobile only.
  "gradient":         map.merge(map.get($utilities, "gradient"), (responsive: true)),
));

The background-color merge also covers Bootstrap 5.3's subtle variants (bg-primary-subtle → bg-md-primary-subtle), which the shipped background options use.

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, so no extra SCSS is 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/columns.reverse have no class family; 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, and 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.

Heading scale and gradients¶

Two shipped tables lean on Bootstrap's own utilities rather than any Canvas Builder styling:

heading_scale_classes offers display-1–display-4 and fs-1/fs-2/ fs-4/fs-6. Each row pairs the Bootstrap class with a cb-type-scale marker, which is what lets a size set on the component wrapper reach the heading inside it, so keep the marker on any row you add. Full explanation in Styles.
Gradients are rows in bg_color_classes, not a separate control: bg-gradient only overlays a translucent gradient on an existing background color, so it ships paired (bg-dark bg-gradient). The 5.3 subtle tints (bg-primary-subtle, bg-secondary-subtle, bg-body-tertiary) ship alongside them as quieter section planes.

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.