How to Shrink Bootstrap's CSS (Import Only What You Need)

Bootstrap’s full stylesheet is bigger than most projects need, because it ships every component and every utility class whether you use them or not. The good news: it shrinks dramatically once you only include what you actually use. This guide covers the three ways to cut Bootstrap’s CSS, with the figures that matter and how to measure your own build.

How big is Bootstrap’s CSS?

The full bootstrap.min.css for Bootstrap 5.3 is roughly 230 KB minified, around 28 KB gzipped. Gzipped is the number that matters, because that is what travels over the wire to your users. A big chunk of that is the utility classes and components a given page never touches.

The fastest way to check any stylesheet yourself:

# minified size, then gzipped size
wc -c bootstrap.min.css
gzip -c bootstrap.min.css | wc -c

Run that on your own output before and after the changes below to see the real difference for your project.

Method 1: import only the partials you use

This is the biggest, safest win. Instead of importing all of Bootstrap, import its required base plus only the components you actually render:

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

// only what you use
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/card";
@import "bootstrap/scss/navbar";

A page that uses the grid plus a handful of components typically lands well under half the full size, and often far less. You are not removing features you need; you are simply not shipping the ones you do not. This is the approach Bootstrap itself recommends for production.

Method 2: remove unused classes with PurgeCSS

If you import all of Bootstrap (or use the CDN build), a content-aware tool like PurgeCSS scans your HTML and templates and deletes selectors that never appear. On content-light marketing sites the saving is large, commonly cutting the file by the majority of its size, because most utility classes go unused.

A typical PostCSS setup:

// postcss.config.js
module.exports = {
  plugins: [
    require('@fullhuman/postcss-purgecss')({
      content: ['./**/*.html', './**/*.js'],
      safelist: [/^modal/, /^show/, /^collapsing/, /^fade/],
    }),
  ],
}

The one caveat: classes that JavaScript adds at runtime (modal, collapse, fade, and similar) are not in your static HTML, so safelist them or PurgeCSS will strip styles your interactions depend on.

Method 3: trim utilities and unused features

Bootstrap’s utility classes are generated from a Sass map, so you can disable the ones you do not use, or turn off whole groups. You can also skip large features entirely, such as not importing the grid if you lay out with flex utilities, or not importing the components you never render. Disabling the utilities you do not need can remove a meaningful slice on its own, since utilities are a large share of the full file.

A note on CSS variables

Bootstrap 5.3 emits CSS custom properties such as --bs-primary into :root. They add a small, fixed amount of CSS but enable runtime theming and dark mode without extra stylesheets, so they generally pay for themselves. They are not where your size problem lives; unused components and utilities are.

Let the builder export only what you need

When you build a theme in the bootstrap.build editor, you are working from Bootstrap’s real Sass, so the exported CSS reflects exactly the parts you include. Combine that with importing only the components you use, and you ship a themed stylesheet that is a fraction of the full download. For the export formats and where the file goes, see how to export a Bootstrap theme, and for the variable system behind it all, Bootstrap Sass variables explained.

FAQ

How small can Bootstrap’s CSS get?

It depends on how much you use, but importing only the required base plus a few components, then gzipping, commonly brings a page well under half of the full ~28 KB gzipped, and content-light sites with PurgeCSS go lower still. Measure your own output with gzip -c file.css | wc -c.

Is it better to use PurgeCSS or import only what I need?

Importing only the partials you use is the cleaner, more predictable approach because nothing unused is ever generated. PurgeCSS is best when you cannot control the import (for example, a CDN build) or want a final safety pass. Many teams do both.

Does removing utilities break Bootstrap components?

No, as long as you keep the required base (functions, variables, maps, mixins, root) and the component partials you render. Only remove utilities and components you genuinely do not use, and safelist any classes JavaScript adds at runtime.

Why is gzipped size the number that matters?

Servers send CSS gzipped (or brotli) by default, so the gzipped size is what your users actually download. A 230 KB file that gzips to 28 KB costs about 28 KB on the wire, which is why the gzipped figure is the honest one to optimize.