Bootstrap 5 Sass Themes

How it works

Sass customization happens at build time. Pin Bootstrap source and a compatible Sass compiler, then set supported defaults before importing the framework. The resulting CSS is a new asset that your HTML must actually load. This lesson uses Bootstrap 5.3.8 and Dart Sass 1.93.2 in a separate lab, not Bhylu’s application dependencies. Bootstrap 5.3 source uses legacy import patterns that produce Sass deprecation warnings; record them and plan an upgrade rather than claiming a permanently warning-free build.

Run and inspect

Save the complete document as index.html in a separate lab folder. Place Bootstrap 5.3.8 CSS beside it. Open the file in a normal browser. A separate local static server is optional; no database or PHP execution is required. Keep the Bootstrap licence with redistributed assets.

Download this complete HTML source.

This example needs the complete local setup and its compiled Sass stylesheet. The restricted CSS playground does not reproduce this example’s full contract.

Example

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap 5 Compile a Pinned Theme Instead of Editing Minified CSS</title>
  <link rel="stylesheet" href="repair-theme.css">
</head>
<body>
<main class="container py-4">
  <h1 class="h3 mb-4">Repair day</h1>
<button type="button" class="btn btn-primary">Themed sample button</button><p class="mt-3 mb-0">This compiled sample uses a navy primary colour and a larger border radius.</p>
</main>
</body>
</html>

Expected result

The compiled theme gives the primary button a navy background and a 0.75rem border radius.

The source variables are set before the framework defines its defaults. Download the SCSS and compiled CSS, or compile locally with the documented command. The full HTML loads repair-theme.css instead of pretending the normal distributed CSS has changed. The browser review checks the actual generated button colour, not just the Sass source text.

Compile this Sass source

In a separate lab, install pinned sources with npm install bootstrap@5.3.8 sass@1.93.2. Save the source as repair-theme.scss, then run npx sass --load-path=node_modules repair-theme.scss repair-theme.css. Bootstrap 5.3 source emits Sass deprecation warnings; the review records those warnings rather than hiding them.

$primary: #0f3464;
$border-radius: .75rem;
@import "bootstrap/scss/bootstrap";

Download SCSS · Download the reviewed compiled CSS. Put repair-theme.css beside index.html; its link intentionally replaces the ordinary framework stylesheet.