Everything a developer changes on a Core dna site lives in its theme repository. This guide covers the repository and its build, printing records in templates, stylesheets and client-side code, and the parts of a site around the main content.
L1–L2
Unit 03 · Stylesheets and SCSS
Bootstrap in a theme
Stylesheets and SCSSPage 21 of 35Updated
Most theme repositories use Bootstrap 5 for the grid, spacing utilities and a few interactive pieces, and their own components for everything visible. How to find the version a site really runs, the Bootstrap 4 class names that silently do nothing, the 5.3 additions, and the import order that makes overrides work.
Who this is for. The theme developer writing markup on a site that uses Bootstrap, or copying a snippet from Bootstrap's documentation. Afterwards you use the class names the installed version understands, know where Bootstrap ends and the site's components begin, and can make a variable override take effect.
Where Bootstrap is used, and where it is not
In the production repositories that use it, Bootstrap supplies the grid, the spacing and display utilities, and a few interactive pieces such as dropdowns, modals and collapses. The visible components, cards, heroes, navigation and forms, are the site's own BEM partials. Do not restyle a Bootstrap component into a site component, and do not rebuild the grid by hand: use each for what it is for. Several production repositories use no Bootstrap at all, the newest among them.
Find the installed version
package.json gives a range; the lock file gives what is installed. Production repositories run everything from 5.1.1 to 5.3.7, so the difference matters:
Bootstrap 5 renamed many utilities, and a Bootstrap 4 name is not an error: it is a class with no rule behind it. Most of these have been found in the templates of production sites running Bootstrap 5, doing nothing; text-left and text-right are the most common:
Bootstrap 4
Bootstrap 5
text-left, text-right
text-start, text-end
float-left, float-right
float-start, float-end
ml-*, mr-*, pl-*, pr-*
ms-*, me-*, ps-*, pe-*
font-italic, font-weight-bold
fst-italic, fw-bold
sr-only
visually-hidden
no-gutters
g-0
data-toggle, data-target
data-bs-toggle, data-bs-target
Before renaming one, search the site's own SCSS and JavaScript for it: one production repository defines its own text-right variant class, and a site's scripts may read data-toggle for something that is not Bootstrap.
What 5.3 adds
Classes from Bootstrap's current documentation may not exist in the version installed. Among those added after 5.1: text-bg-* (5.2), and text-body-secondary, link-underline-*, focus-ring and the data-bs-theme colour modes (5.3). On a 5.1 site they do nothing, as silently as the Bootstrap 4 names.
Overriding Bootstrap's variables
Bootstrap's variables are declared with !default, so an override must be set before Bootstrap's variables file is imported, and after its functions. Overrides imported later change the variable but not the maps already built from it, such as $theme-colors, and seem to do nothing:
SCSSstyle.scss (extract)
@import '~bootstrap/scss/functions';
// the site's overrides: after functions, before variables
@import 'config/variables';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/variables-dark'; // 5.3 only
@import '~bootstrap/scss/maps';
@import '~bootstrap/scss/mixins';
@import '~bootstrap/scss/utilities';
// then only the parts the site uses
@import '~bootstrap/scss/root';
@import '~bootstrap/scss/reboot';
@import '~bootstrap/scss/grid';
@import '~bootstrap/scss/utilities/api';
Importing only the parts the site uses, rather than all of bootstrap/scss/bootstrap, also keeps unused components out of the stylesheet. Measure the output before and after: Bundle budgets.