Customizing Bootstrap 5 with Sass: Themes Without the Bloat

For the first year I used Bootstrap I did what almost every beginner does — imported the compiled CSS, then wrote 800 lines of !important overrides to force it into the client's brand colours. It worked, but every future tweak was a war. Then a senior at my old IT company showed me the Sass workflow: change six variables, re-import, done. My custom CSS on the next project dropped from 800 lines to under 40. If you're shipping more than one Bootstrap site a year, this is the workflow that pays for itself in an afternoon.

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