Customization

How to Export a Custom Bootstrap Theme and Use It

By the bootstrap.build team · 6 min read · Published

You have a custom Bootstrap theme, either tuned visually or written by hand. Now you need it running in a real project. There are two clean ways to ship it: as Sass source that compiles with your build, or as compiled CSS you link directly with no build step. This guide walks through both, using the exact files the bootstrap.build editor produces when you export.

The short answer

  • Have a Sass/build pipeline (Vite, Webpack, npm)? Export the Sass source. You get a small overrides file that you import before Bootstrap, so updates stay easy.
  • Just want a stylesheet to drop in? Export the compiled CSS and link it like any other .css file. No Node, no build.

Both are standard Bootstrap output. Nothing proprietary, nothing locked in.

What the export contains

When you export a theme, you get two things:

  1. _variables.scss (or custom.scss): only your overrides, the variables you changed, ready to sit in the correct slot before Bootstrap’s import.
  2. bootstrap.css / bootstrap.min.css: the full compiled stylesheet with your theme baked in, if you chose the CSS export.

The Sass file is intentionally minimal. It is not a fork of Bootstrap; it is just your deltas, which is what keeps version upgrades painless.

Option 1: ship the Sass source

This is the recommended path for any project that already compiles Sass. Drop your overrides into the override slot, before Bootstrap loads, so the !default flags pick them up:

// main.scss
@import "bootstrap/scss/functions";

// your exported overrides
@import "variables"; // the file from the export

@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";
@import "bootstrap/scss/bootstrap";

Order is everything here, because Bootstrap variables only accept your values if they are set first. If a change is being ignored, this slot is almost always the reason. The mechanism is explained in Bootstrap Sass variables explained.

Install Bootstrap from npm (npm install bootstrap), point your bundler at main.scss, and compile. With Vite or modern Webpack the Sass just works; older setups may need sass-loader. The output is your themed Bootstrap.

Option 2: ship the compiled CSS

If you do not want a build step, export the compiled CSS and link it like any stylesheet:

<link rel="stylesheet" href="bootstrap.min.css">

That single file already includes your theme, so there is nothing to compile. This is ideal for static sites, server-rendered templates, landing pages, or any project where adding a Sass pipeline is overkill. The tradeoff: to change the theme later you re-export rather than edit a variable, so this path suits themes that are essentially final.

If you also need Bootstrap’s interactive components (modals, dropdowns, the collapse navbar), add the bundle script:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/js/bootstrap.bundle.min.js"></script>

Using your theme with a framework

The Sass export drops into framework projects the same way:

  • React / Vue / Angular with Vite or Webpack: import main.scss (with the override slot above) once in your entry file. Your themed CSS applies app-wide.
  • WordPress or other PHP templates: the compiled CSS export is usually simplest; enqueue it like any stylesheet.
  • Plain HTML: the compiled CSS export, linked in <head>.

In every case the markup and class names are standard Bootstrap, so component libraries and examples keep working. Once the files are ready, see where to host your HTML website for the quickest way to get them online.

Keeping the file small

A full Bootstrap build is larger than most projects need. If you only use a handful of components, import only those partials instead of the whole framework, and your exported CSS shrinks accordingly. See how to shrink Bootstrap’s CSS for the measured difference.

Export it from the builder

The fastest route to either format is the bootstrap.build editor. Tune your theme with a live preview, then export the Sass overrides (already placed before the Bootstrap import) or the compiled CSS, whichever your project needs. Because the builder loads variables in the correct order, the exported Sass compiles cleanly with no surprises.

FAQ

How do I export a Bootstrap theme?

Open the builder, customize your variables, and use Export. Choose Sass to get a small overrides file for a build pipeline, or compiled CSS to link directly with no build step.

Should I export Sass or CSS?

Export Sass if your project already compiles Sass and you want to keep tweaking the theme. Export compiled CSS if you want a finished stylesheet to drop in with no build tooling.

Where do I put the exported Sass file?

In the override slot: after @import "bootstrap/scss/functions" and before @import "bootstrap/scss/variables". Bootstrap’s !default variables only accept values set before that import.

Does a custom theme make updating Bootstrap harder?

No. The export is just your variable overrides, not a modified copy of Bootstrap. Update the Bootstrap package and recompile, and your overrides reapply.

Try it in the builder

Make these changes visually with a live preview, then export clean Bootstrap Sass or CSS.

Open the Builder