How to Customize Bootstrap 5: The Complete Guide

Bootstrap gives you a complete UI kit out of the box, but its real strength is how far you can bend it to match a brand. You can change colors, type, spacing, border radius, shadows, and every component, and still ship standard, framework-native Bootstrap. This guide is the map: the two ways to customize Bootstrap 5, what is worth changing first, and where each deeper guide picks up. It reflects how we think about theming after building the bootstrap.build editor around all 1,000+ of Bootstrap’s variables.

Two ways to customize Bootstrap

There are exactly two paths, and most projects use a mix of both.

1. Visually, in the browser. Open the builder, change a value, and watch a full UI kit update live. When you are happy, export clean Bootstrap Sass or compiled CSS. No setup, no build step, and the output is standard Bootstrap.
2. In Sass. Override Bootstrap’s variables in your own .scss file and compile. This gives total control and fits an existing build pipeline.

The visual path is faster for finding a look. The Sass path is how that look ships in a codebase. The good news: both produce the same kind of output, so you can prototype visually and hand the exported Sass to your build.

What you can customize (and where to start)

Customizing in priority order, because some changes carry far more visual weight than others:

1. Colors

Color is the highest-impact change. Set $primary and the rest of $theme-colors, add a brand color, and Bootstrap recomputes buttons, links, alerts, badges, and more. Full walkthrough: how to customize Bootstrap 5 colors.

2. Typography

Swap the font, load a Google Font, and tune the type scale with $font-family-base, $font-size-base, and the heading sizes. Type sets the personality of a theme as much as color does. See change fonts and typography in Bootstrap 5.

3. Shape and spacing

A single $border-radius change ripples through buttons, cards, inputs, and dropdowns. $spacer rescales the entire spacing utility scale at once. These two variables quietly define whether a theme feels soft or sharp, airy or dense. See the spacing utilities guide.

4. Dark mode

Bootstrap 5.3 has built-in color modes. Add a light and dark toggle with data-bs-theme, then customize the dark palette. See how to add dark mode.

5. Components

Every component reads its own variables, like $btn-padding-y, $card-border-radius, or $navbar-padding-y. Reach for these only when a global change is not enough, so your theme stays consistent.

The system underneath: Sass variables

All of the above runs on one mechanism. Bootstrap’s variables use the !default flag, so your overrides only take effect if you declare them before you import Bootstrap. The canonical structure is functions, then your overrides, then the rest of the framework:

@import "bootstrap/scss/functions";

// your overrides
$primary: #6c4cf1;
$font-family-base: "Inter", sans-serif;
$border-radius: 0.5rem;

@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";
@import "bootstrap/scss/bootstrap"; // or only the partials you use

If you have ever changed a variable and seen nothing happen, this order is why. The full system, the three variable tiers, and how to edit maps like $theme-colors are covered in Bootstrap Sass variables explained. It is the single most useful thing to understand before customizing anything by hand.

Sass variables vs CSS variables

Bootstrap 5.3 emits CSS custom properties (--bs-primary, --bs-body-bg) alongside the Sass system. Use Sass variables to define your theme at build time, and CSS variables for runtime tweaks that need no recompile, like a single highlighted section or the dark-mode switch. They are complementary, not competing.

Exporting and shipping your theme

Once a theme looks right, you need it in your project. You can export the Sass source (your overrides in the correct slot) for a build pipeline, or the compiled CSS to link directly with no build step. The full workflow is in how to export a Bootstrap theme. To keep the file lean, import only the parts you use, covered in how to shrink Bootstrap’s CSS.

Do it all visually

Every variable mentioned here is editable in the bootstrap.build editor with a live preview, loaded in the correct order so overrides always take effect. Change a color, a font, a radius, or a spacing value, see a full UI kit react instantly, then export real Bootstrap Sass or CSS. It is the fastest way to go from Bootstrap’s defaults to a theme that is unmistakably yours.

FAQ

What is the easiest way to customize Bootstrap 5?

Change its Sass variables. Set $primary, $font-family-base, and $border-radius, and Bootstrap recomputes most of the UI. The fastest no-setup route is the visual builder, which edits those variables for you and exports the result.

Can I customize Bootstrap without Sass?

Yes, two ways. Use the builder to export compiled CSS and link it with no build step, or override Bootstrap’s CSS variables (like --bs-primary) at runtime for scoped tweaks. For a full themable build, Sass variables are still the most powerful option.

Will customizing Bootstrap break updates?

No, as long as you override variables rather than editing Bootstrap’s own files. Your overrides live in a separate file, so you can bump the Bootstrap version and recompile.

How much can you actually customize in Bootstrap?

Effectively everything: colors, fonts, the type scale, spacing, border radius, shadows, breakpoints, and every component’s dimensions, all through variables, while still producing standard Bootstrap markup and classes.