Customizing Bootstrap 5 with Sass: Themes Without the Bloat

Loading the default Bootstrap CSS and then writing thousand-line overrides is the slow path. The fast path: import Bootstrap's Sass, change a handful of variables, and let the framework rebuild itself around them.

Project setup

npm install bootstrap sass

The minimal custom.scss

// 1. Your variable overrides come FIRST
$primary: #6d28d9;
$font-family-base: 'Inter', system-ui, sans-serif;
$border-radius: 0.75rem;

// 2. Then import Bootstrap
@import "bootstrap/scss/bootstrap";

Importing only what you use

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/forms";

Cherry-picking the components you actually use can cut the final CSS by 60–80%.

Adding custom colours to utilities

$custom-colors: (
  "brand": #ff5733,
  "accent": #14b8a6
);
$theme-colors: map-merge($theme-colors, $custom-colors);

Now .bg-brand, .text-brand, and .btn-brand all exist automatically.

Common mistakes

• Importing the full Bootstrap CSS AND a custom build (you'll ship both)
• Overriding variables after the @import
• Editing bootstrap source files instead of overriding