Sass with Bootstrap

How Bootstrap Uses Sass Internally

Every color, spacing value, breakpoint, and border-radius in Bootstrap is a Sass variable declared with !default. This means you can override any of them before Bootstrap's own Sass files run, and your values will be used throughout the entire framework automatically.

// custom.scss
$primary: #7c3aed;
$border-radius: 0.75rem;

@import "bootstrap/scss/bootstrap";

Because Bootstrap declares $primary and $border-radius with !default, setting them first means Bootstrap's own default assignments are skipped, and every component using them picks up your custom values.

Customization Order Matters

// 1. Override variables first
$primary: #7c3aed;

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

• Variable overrides must come before Bootstrap's own Sass is loaded, since !default only skips assignment if a variable is already set.
• Bootstrap 5 still documents this pattern primarily with @import, though newer releases are moving toward the module system.
• You can override colors, spacing, typography, breakpoints, and dozens of other configuration variables this way.
• Only the components you actually @import (or @use) generate CSS output, unused ones can be skipped entirely.

Sass with Bootstrap Cheatsheet

Common Bootstrap Sass variables you're likely to override.

Importing Only What You Need

Instead of importing all of Bootstrap, you can import individual partials, functions and variables first, then only the specific components your project actually uses, keeping the compiled CSS significantly smaller.

// Load required foundations first
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";

// Then only the components you use
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/card";

Using Bootstrap's Own Mixins

Bootstrap exposes many of its internal mixins (like its own responsive breakpoint mixin, media-breakpoint-up()) for reuse in your custom components, keeping your own responsive rules consistent with Bootstrap's grid system.

.custom-banner {
  padding: 1rem;

  @include media-breakpoint-up(md) {
    padding: 2rem;
  }
}

Combining Your Own Tokens With Bootstrap's

A common real-world pattern maps your project's own design tokens onto Bootstrap's variable names before loading it, letting your design system and Bootstrap's component library share a single source of truth.

@use 'sass:map';
$tokens: (primary: #7c3aed, radius: 0.75rem);

$primary: map.get($tokens, primary);
$border-radius: map.get($tokens, radius);

@import "bootstrap/scss/bootstrap";

Common Mistakes

• Loading Bootstrap's Sass before overriding its variables, which means the !default values are already locked in and your overrides have no effect.
• Importing the entire Bootstrap library when only a handful of components are actually used in the project.
• Overriding Bootstrap's compiled CSS with !important overrides instead of customizing the Sass variables it was built to be configured with.
• Not loading functions, variables, and mixins before other individual Bootstrap component partials, which depend on them.

Key Takeaways

• Bootstrap's entire visual system is built from !default Sass variables, designed to be overridden before loading.
• Set your overrides before importing Bootstrap's own Sass files, order matters due to how !default works.
• Import only the specific Bootstrap components your project uses to reduce compiled CSS size.
• Bootstrap exposes reusable mixins (like its breakpoint mixin) you can use in your own custom components.