How to Customize Bootstrap 5 with Sass Variables

One of the things I actually like about Bootstrap is the Sass variable system. You override variables before importing Bootstrap and your changes flow through every component automatically. Change $primary and every primary button, alert, badge and link updates.

Here's how to do it properly.

The Basic Rule

Override variables before importing Bootstrap. Not after. Before.

Bootstrap uses !default on all its variables:

$primary: #0d6efd !default;

!default means "set this to the given value only if this variable hasn't already been defined." So if you define $primary before Bootstrap does, Bootstrap sees your value and uses it everywhere.

Setup with Vite + Sass

If you're using my recommended Vite setup from the install tutorial:

npm install bootstrap
npm install --save-dev sass

Create src/styles/main.scss:

// ── 1. Override Bootstrap variables ──────────────────────────────
$primary:          #fd4766;
$secondary:        #6b7280;
$success:          #10b981;
$info:             #0ea5e9;
$warning:          #f59e0b;
$danger:           #ef4444;
$dark:             #0d0d0d;

// Typography
$font-family-base: 'Inter', system-ui, -apple-system, sans-serif;
$font-size-base:   1rem;
$line-height-base: 1.6;

// Borders
$border-radius:    0.5rem;
$border-radius-sm: 0.375rem;
$border-radius-lg: 0.75rem;

// Spacing
$spacer: 1rem;

// ── 2. Import Bootstrap ──────────────────────────────────────────
@import "bootstrap/scss/bootstrap";

// ── 3. Your custom styles below Bootstrap ────────────────────────
.btn-brand {
  @include button-variant(#fd4766, #fd4766);
}

Import in main.js:

import './styles/main.scss'

Run npm run dev and your Bootstrap now uses your custom colors everywhere — buttons, alerts, badges, links, form focus rings, all of it.

The Most Useful Variables

Here's what I override on most projects:

// Colors
$primary: #your-brand-color;
$body-color: #1a1a2e;         // Main text color
$body-bg: #ffffff;            // Page background

// Typography
$font-family-base: 'Your Font', sans-serif;
$font-size-base: 0.9375rem;   // 15px instead of 16px
$headings-font-weight: 700;

// Components
$border-radius: 8px;          // Rounder or squarer corners
$box-shadow: 0 2px 8px rgba(0,0,0,0.08);
$box-shadow-sm: 0 1px 4px rgba(0,0,0,0.06);

// Navbar
$navbar-padding-y: 0.75rem;
$navbar-nav-link-padding-x: 0.875rem;

// Cards
$card-border-radius: 12px;
$card-box-shadow: 0 2px 8px rgba(0,0,0,0.06);

// Buttons
$btn-padding-x: 1.25rem;
$btn-border-radius: 6px;
$btn-font-weight: 600;

// Inputs
$input-border-radius: 6px;
$input-focus-border-color: $primary;

Adding Custom Color Variants

Bootstrap generates utility classes for all colors in $theme-colors. Add your own color and get btn-brand, bg-brand, text-brand, badge bg-brand automatically:

// Add custom colors to the theme-colors map
$custom-colors: (
  "brand": #fd4766,
  "indigo": #4f6ef7,
  "teal": #14b8a6
);

// Must import functions and variables first, then merge
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";

$theme-colors: map-merge($theme-colors, $custom-colors);

// Then import the rest of Bootstrap
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
// ... rest of Bootstrap components

Now you can use <button class="btn btn-brand"> and <span class="badge bg-indigo">.

Importing Only What You Need

For smaller bundle sizes, import Bootstrap components individually:

// Required
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

// Only the components you use
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/containers";
@import "bootstrap/scss/nav";
@import "bootstrap/scss/navbar";
@import "bootstrap/scss/card";
@import "bootstrap/scss/button";
@import "bootstrap/scss/forms";
@import "bootstrap/scss/modal";
@import "bootstrap/scss/utilities/api";

On a real project this can cut the CSS size by 30-40%.

Where to Find All Variables

The complete list is in node_modules/bootstrap/scss/_variables.scss. Open it and search for whatever you want to change. Every variable has !default — copy any of them into your file before the Bootstrap import.

For a well-organized project I keep two files:

• src/styles/_variables.scss — all Bootstrap overrides
• src/styles/main.scss — imports variables, then Bootstrap, then custom styles

// main.scss
@import 'variables';
@import 'bootstrap/scss/bootstrap';
@import 'components';
@import 'utilities';

Clean, predictable, easy to maintain.