Customizing Bootstrap with Sass — Variables and Theme Customization

In this tutorial, you will learn about Customizing Bootstrap with Sass. We cover key concepts, practical examples, and best practices to help you master this topic.

Customizing Bootstrap with Sass allows you to override default variables, import specific components, and generate a unique theme without modifying Bootstrap's source files.

What You'll Learn

You will learn how to set up Sass compilation for Bootstrap, override variables like colors and spacing, import only needed components, and create a custom theme.

Why It Matters

A custom theme differentiates your brand. DodaTech uses a custom Bootstrap theme with purple primary colors and custom border radii across all its products.

Real-World Use

Doda Browser's interface uses a Sass-customized Bootstrap build with brand colors, custom font sizes, and only the components actually used in the UI.

flowchart LR
    A[Badges & Progress] --> B[Sass Customization]
    B --> C[Setup]
    B --> D[Variables]
    B --> E[Component Imports]
    B --> F[Build]
    C --> G[Custom Theme]
    style B fill:#7952b3,stroke:#563d7c,color:#fff
    style G fill:#22c55e,stroke:#16a34a,color:#fff

Project Setup

npm init -y
npm install bootstrap@5.3.3 sass

Create src/styles.scss:

// Custom variables must come before Bootstrap import
$primary: #7c3aed;
$border-radius: 0.5rem;

@import "bootstrap/scss/bootstrap";

Compile:

npx sass src/styles.scss dist/styles.css

Expected output: A compiled CSS file with Bootstrap styled using the custom primary color (purple) and border radius.

Variable Override Examples

// Colors
$primary: #7c3aed;
$secondary: #64748b;
$success: #10b981;
$danger: #ef4444;
$warning: #f59e0b;
$info: #3b82f6;
$light: #f8fafc;
$dark: #0f172a;

// Typography
$font-family-sans-serif: "Inter", system-ui, -apple-system, sans-serif;
$font-family-monospace: "JetBrains Mono", monospace;
$font-size-base: 1rem;
$headings-font-weight: 600;

// Spacing
$spacer: 1rem;

// Border
$border-radius: 0.5rem;
$border-radius-lg: 0.75rem;
$border-radius-sm: 0.25rem;

// Buttons
$btn-border-radius: 0.5rem;
$btn-padding-y: 0.5rem;
$btn-padding-x: 1.25rem;

// Cards
$card-border-radius: 0.75rem;
$card-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

@import "bootstrap/scss/bootstrap";

Expected output: A complete Bootstrap build with all custom values applied to every component.

Importing Specific Components

Instead of importing all of Bootstrap, import only what you need:

// 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";

// Optional components
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/forms";
@import "bootstrap/scss/nav";
@import "bootstrap/scss/navbar";
@import "bootstrap/scss/card";
@import "bootstrap/scss/modal";

// Utilities API
@import "bootstrap/scss/utilities/api";

Expected output: A Bootstrap build with only the required components and your selected optional components. This reduces file size significantly.

Adding Custom Components

// After Bootstrap import
.btn-doda {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: white;
  border: none;
  padding: 0.75rem 2rem;
  border-radius: 999px;
  font-weight: 600;
  transition: transform 0.2s;

  &:hover {
    transform: translateY(-2px);
    color: white;
  }
}

Expected output: A custom styled button that extends Bootstrap's button system with your own design.

Theming with Maps

// Add custom colors to the theme
$custom-colors: (
  "doda-purple": #7c3aed,
  "doda-teal": #14b8a6,
);

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

@import "bootstrap/scss/bootstrap";

Expected output: New utility classes like bg-doda-purple, text-doda-teal, btn-doda-purple become available.

Common Mistakes

1. Importing Variables After Bootstrap

Custom variables must be defined before the Bootstrap import. Variables defined after are ignored.

2. Not Including Required Bootstrap Files

When importing specific components, you need the base files (functions, variables, mixins). Without them, component imports fail.

3. Overriding Variables That Do Not Exist

Check Bootstrap's variable documentation before overriding. Misspelled variable names create new variables without affecting Bootstrap.

4. Not Running Sass Compilation After Changes

Sass files must be compiled to CSS after every change. Use --watch flag for automatic recompilation.

5. Importing Both Full Bootstrap and Custom Components

If you import bootstrap/scss/bootstrap and also add individual component imports, you get duplicate styles. Use one approach.

Practice Questions

1. Where should you place custom variable overrides? Before the Bootstrap Sass import statement.

2. How do you add a custom color that generates full utility classes? Add the color to a map and merge it into $theme-colors using map-merge.

3. What is the benefit of importing only specific components? Smaller compiled CSS file size by excluding unused components.

4. How do you automatically recompile Sass on changes? Use the --watch flag: npx sass src/styles.scss dist/styles.css --watch.

5. What are the required Bootstrap imports for any build? functions, variables, variables-dark, maps, mixins, and utilities.

Challenge

Create a custom Bootstrap theme for a fictional brand called "SecureWeb" with blue primary (#2563eb), green success (#16a34a), custom font (Inter), larger border radius (0.75rem), and a new custom color "accent" (#f97316).

FAQ

Mini Project

Build a custom Bootstrap theme for a dashboard application. Override primary/secondary colors, customize card styles, add a custom gradient button variant, and import only grid, buttons, cards, forms, and navbar components.

What's Next

Learn Customizing Bootstrap with CSS Variables for runtime theming. Then explore Bootstrap JavaScript for programmatic component control.