Customizing Bootstrap with Sass

Every default Bootstrap site shares the same recognizable blue buttons and system font, and the usual first instinct to change that — writing CSS that overrides .btn-primary after the Bootstrap stylesheet loads — works, but scales badly. Every component that uses the primary color needs its own override, and you're fighting specificity the whole way. Bootstrap's actual customization mechanism is its Sass source, which this lesson introduces at a conceptual level.

Why this requires npm, not the CDN

Sass variables only exist in Bootstrap's .scss source files — the CDN and the pre-built dist/css/bootstrap.min.css are already-compiled output, with no variables left to change. Customizing via Sass means installing Bootstrap through npm (as covered in the installation lesson) and compiling it yourself, or through your framework's existing build pipeline.

Overriding variables before importing

Bootstrap's Sass is written so that every color, font, spacing value, and breakpoint is a variable with a default, defined using Sass's !default flag — which means your value wins if you define the same variable before Bootstrap's own file runs:

// custom.scss

// 1. Override variables BEFORE importing Bootstrap
$primary: #6f42c1;
$font-family-sans-serif: "Inter", sans-serif;
$border-radius: 0.75rem;

// 2. Then import Bootstrap's source
@import "bootstrap/scss/bootstrap";

Because $primary is now purple before Bootstrap defines its own $primary: #0d6efd !default;, Bootstrap's !default sees a value already exists and skips its own — every component built from $primary (buttons, links, form focus rings, badges) picks up your color automatically, with zero component-specific overrides written.

Importing only what you need

Bootstrap's Sass is also split into separate partial files, so a project that only uses a handful of components can skip compiling CSS for the rest:

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";

@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/card";
// skip: navbar, carousel, modal, tooltip, etc. if unused

This produces a noticeably smaller CSS file than the full framework — worth doing on a performance-sensitive project, though it does mean remembering to add an import if you later start using a component you'd left out.

Adding your own theme color

Bootstrap's color system (primary, success, danger, and so on) is itself just a Sass map, which means you can add an entirely new named color that gets its own button, text, and background utility classes for free:

$custom-colors: (
  "brand": #ff6b35,
);
$theme-colors: map-merge($theme-colors, $custom-colors);

@import "bootstrap/scss/bootstrap";

After this, .btn-brand, .text-brand, and .bg-brand all exist and behave exactly like Bootstrap's built-in variants — same hover states, same focus rings — because they're generated by the same Sass loops Bootstrap uses for its own colors.

The tradeoff

Sass customization is the "correct" way to theme Bootstrap, but it commits you to a Sass build step, and every variable name is specific to whatever Bootstrap version you're on — variables do get renamed or removed between major versions. For a small project, a thin layer of CSS custom-property overrides on top of the compiled CSS may genuinely be simpler; reach for Sass customization once a project is large enough, or long-lived enough, that consistent theming across dozens of components actually pays for the extra build complexity.