Customising Bootstrap 5 With SASS: A Practical Workflow

Most Bootstrap projects stall at the same point: the default styles look unmistakably generic, and overriding them with a sprawling custom.css file creates a maintenance nightmare. Using SASS to customise Bootstrap 5 at the source level solves both problems in one step.

Why SASS, Not CSS Overrides

Writing post-compiled CSS overrides is the path of least resistance but the most expensive long-term strategy. Every override you add increases specificity debt, and any future Bootstrap update can shift the cascade in unexpected ways. SASS customisation works upstream — you change the values Bootstrap uses to generate its entire stylesheet, so the output is already correct before a single browser reads it.

Bootstrap 5 was rebuilt with SASS customisation as a first-class feature. Every colour, spacing step, font size, border radius, and breakpoint is defined as a SASS variable with a !default flag. That flag means Bootstrap only applies the value if no other value has already been set. Declare your own value first, and Bootstrap defers to yours automatically.

This is the core mechanic. Everything that follows is just a structured way to exploit it reliably across a real project.

Setting Up Your SASS Environment

You need three things: Node.js, the SASS package, and Bootstrap’s SASS source files. If you are working with the Canvas HTML Template, Bootstrap 5 is already bundled — never load the Bootstrap CDN separately, as it will conflict with Canvas’s compiled output. Instead, reference Canvas’s own style.css and css/font-icons.css for production, and work against Bootstrap’s SASS source only during your local build step.

Install the dependencies you need:

npm init -y
npm install sass bootstrap

Create a project structure that separates concerns clearly:

scss/
  _variables.scss      # Your Bootstrap variable overrides
  _custom.scss         # Component-level additions
  main.scss            # Entry point that imports everything

Your main.scss entry point must follow a strict import order: your variable overrides first, Bootstrap second, your component additions third. Reversing this order breaks the !default mechanism entirely.

// 1. Your variable overrides — must come first
@use "variables" as *;

// 2. Bootstrap's full SASS source
@use "../node_modules/bootstrap/scss/bootstrap";

// 3. Your component-level additions
@use "custom";

Overriding Bootstrap Variables Correctly

Bootstrap 5 organises its variables into logical groups. The most frequently customised are colours, typography, spacing, and border radius. Here is a practical _variables.scss file that covers the most impactful overrides:

// Colours
$primary:   #2563eb;
$secondary: #64748b;
$success:   #16a34a;
$danger:    #dc2626;
$body-color: #1e293b;

// Typography
$font-family-sans-serif: 'Inter', system-ui, sans-serif;
$font-size-base:         1rem;
$line-height-base:       1.65;
$headings-font-weight:   700;
$headings-line-height:   1.2;

// Spacing scale
$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer * 0.25,
  2: $spacer * 0.5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
  6: $spacer * 4.5,
  7: $spacer * 6
);

// Border radius
$border-radius:    0.5rem;
$border-radius-lg: 0.75rem;
$border-radius-xl: 1rem;

// Breakpoints
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

Note that extending the $spacers map — as shown above with steps 6 and 7 — automatically generates corresponding utility classes like mt-6, pb-7, and so on. This is one of the most useful and underused Bootstrap 5 SASS features. For more on what utility classes Bootstrap generates out of the box, the post on Bootstrap 5 utility classes covers the full list in practical detail.

Component-Level SASS Extensions

Variable overrides handle global tokens. For component-specific adjustments — custom button shapes, card styles, nav treatments — use your _custom.scss file. This keeps component logic isolated and easy to find when a design changes.

// Custom button shape and weight
.btn {
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: $border-radius;
}

.btn-primary {
  box-shadow: 0 4px 14px rgba($primary, 0.35);

  &:hover {
    box-shadow: 0 6px 20px rgba($primary, 0.45);
    transform: translateY(-1px);
  }
}

// Card with elevated appearance
.card {
  border: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border-radius: $border-radius-lg;

  .card-body {
    padding: map-get($spacers, 4);
  }
}

Because you are writing SASS inside the same compilation context as Bootstrap, you have full access to Bootstrap’s own variables and maps — including $primary, $spacers, and the map-get() function — without repeating values. This is the most practical advantage of working in SASS rather than plain CSS.

If your project involves complex layouts, the CSS Flexbox Generator and the Bootstrap Grid Calculator are useful companions for working out alignment and column configurations before writing SASS.

Working With Canvas HTML Template and SASS

The Canvas Builder ecosystem adds a second customisation layer on top of Bootstrap 5 via CSS custom properties. Understanding where each system operates prevents wasted effort.

Bootstrap SASS variables control the compiled output — colours, spacing, type scale, components. They are resolved at build time and baked into the final CSS.

Canvas CSS custom properties operate at runtime and can be changed in the browser or via JavaScript without recompilation. The key Canvas variables are:

• --cnvs-themecolor — the primary brand colour used across Canvas components
• --cnvs-themecolor-rgb — the RGB triplet of the theme colour for use in rgba() expressions
• --cnvs-primary-font and --cnvs-secondary-font — font stack declarations
• --cnvs-logo-height and --cnvs-logo-height-sticky — logo sizing, never override via #logo img
• --cnvs-header-bg and --cnvs-header-sticky-bg — header background states
• --cnvs-primary-menu-color and --cnvs-primary-menu-hover-color — navigation link colours

A practical Canvas customisation typically looks like this in your stylesheet:

:root {
  --cnvs-themecolor: #2563eb;
  --cnvs-themecolor-rgb: 37, 99, 235;
  --cnvs-primary-font: 'Inter', sans-serif;
  --cnvs-logo-height: 42px;
  --cnvs-logo-height-sticky: 32px;
  --cnvs-header-bg: #ffffff;
  --cnvs-header-sticky-bg: rgba(255, 255, 255, 0.95);
  --cnvs-primary-menu-color: #1e293b;
  --cnvs-primary-menu-hover-color: #2563eb;
}

For deeper context on how Bootstrap 5’s component architecture relates to template-level work, the Bootstrap 5 complete guide for web designers is worth reading alongside this workflow.

Compiling and Integrating Into a Build Pipeline

For straightforward projects in 2025, the SASS CLI is sufficient. Add a compile script to your package.json:

"scripts": {
  "sass": "sass scss/main.scss dist/css/main.css --style=compressed --source-map",
  "sass:watch": "sass scss/main.scss dist/css/main.css --watch"
}

Run npm run sass:watch during development for live recompilation on every save. The --source-map flag generates a source map so browser DevTools shows you the original SASS line when you inspect an element — essential for debugging large projects.

For production, add a PurgeCSS step to strip unused Bootstrap utility classes. A default Bootstrap 5 build is around 200KB uncompressed; PurgeCSS typically reduces this to under 30KB for a typical landing page, which has a measurable effect on Core Web Vitals scores.

If you need to convert design token values between pixel and rem units during this process, the px to rem converter handles that quickly without manual calculation.

If you’re working with the Canvas HTML Template and want to generate production-ready layouts faster, try Canvas Builder free and see how much time you save on every project.