Styling with Bootstrap Source

A site built on Bootstrap is easiest to change later when Bootstrap is compiled from its SCSS source inside the site, with the site's own decisions layered on top. Pasting a design's compiled CSS into one stylesheet looks finished on day one, but every later brand change means hunting through generated rules.

The three stylesheets
• /_variables.scss holds brand decisions as Bootstrap variable overrides — colors ($primary, $secondary, …), fonts, spacing, border radius. It is a partial: it is never compiled or attached on its own.
• /main.scss imports /_variables.scss first, then Bootstrap's own SCSS source (the Bootstrap 5 package puts it at /bootstrap5/scss/bootstrap.scss), then any icon fonts, then the site's component rules or imports of component partials. It is the one stylesheet the site attaches.
• Component rules go after the Bootstrap import, so they can use Bootstrap's variables, mixins, and utility classes.

@import "/_variables.scss";
@import "/bootstrap5/scss/bootstrap.scss";
@import "/bootstrap-icons/font/bootstrap-icons.scss";
// site components below

Attach /main.scss once, from the shared header, with {% add_stylesheet "/main.scss" %}. The CMS compiles it on publish, so the package never carries compiled CSS. Bootstrap's javascript is not attached by default; add it with {% add_javascript "/bootstrap5/js/bootstrap.bundle.min.js" %} only when components need it.

Standards
Following Marketpath Site Standards 1 is recommended for a site built this way. The Bootstrap 5 variant is standard:mpss1-bootstrap5 (see MPSS1 Framework Variants), with the same /_variables.scss and /main.scss names and the MPSS1 header and footer inputs. The complete example mpss1-bootstrap5 shows the whole shell.