Bootstrap - Optimizing Bootstrap Performance by Removing Unused CSS

Bootstrap is a feature-rich CSS framework that includes a large collection of components, utilities, layouts, and helper classes. While this makes development faster, it also means that the framework contains many styles that may never be used in a particular project. Loading all of Bootstrap's CSS, even when only a small portion is needed, increases file size, slows down page loading, and affects website performance. Optimizing Bootstrap by removing unused CSS helps create faster, more efficient, and user-friendly websites.

Modern websites aim to reduce unnecessary resources so that pages load quickly on desktops, tablets, and mobile devices. Search engines also consider page speed as an important ranking factor, making CSS optimization beneficial for both users and SEO.

Why Bootstrap CSS Needs Optimization

The default Bootstrap CSS file includes styles for nearly every component offered by the framework, including:

• Buttons

• Cards

• Modals

• Dropdowns

• Tooltips

• Forms

• Tables

• Navigation bars

• Carousels

• Utility classes

• Grid system

• Typography

A website may only use a fraction of these components. The remaining unused styles increase the CSS file size unnecessarily.

For example:

• Bootstrap CSS file: 230 KB

• Actual styles used: 40 KB

• Unused CSS: 190 KB

Removing the unused CSS significantly reduces the amount of data downloaded by visitors.

Benefits of Removing Unused CSS

Faster Page Loading

Smaller CSS files download more quickly, reducing the time required for a webpage to become visible.

Better Mobile Performance

Mobile users often have slower internet connections. Optimized CSS decreases bandwidth usage and improves loading times.

Improved Search Engine Optimization

Google's Core Web Vitals measure loading speed and user experience. Smaller CSS files contribute to better performance scores.

Lower Server Bandwidth

Every visitor downloads fewer resources, reducing hosting bandwidth consumption.

Faster Browser Rendering

Browsers spend less time parsing CSS files before displaying the webpage.

Improved User Experience

Users experience quicker navigation and fewer delays when interacting with the website.

Understanding Unused CSS

Unused CSS consists of style rules that are included in the CSS file but never applied to any element on the website.

Example:

<div class="card">
    Card Content
</div>

If the website never uses components such as:

• Carousel

• Tooltip

• Popover

• Accordion

their CSS is still downloaded unless removed.

Methods for Removing Unused Bootstrap CSS

Method 1: Use a Custom Bootstrap Build

Bootstrap is built using Sass. Instead of importing the complete framework, developers can include only the required modules.

Example:

@import "functions";
@import "variables";
@import "mixins";

@import "grid";
@import "buttons";
@import "forms";
@import "utilities";

Components like carousel, tooltip, modal, and popover are excluded if they are not required.

Advantages include:

• Smaller CSS files

• Faster compilation

• Better project organization

Method 2: Use PurgeCSS

PurgeCSS is a tool that scans HTML, JavaScript, and template files to determine which CSS classes are actually used. It removes all unused CSS selectors from the final stylesheet.

Example project structure:

project/
│
├── index.html
├── about.html
├── app.js
├── bootstrap.css

PurgeCSS scans these files and retains only the Bootstrap classes that appear in the project.

Example:

If the website uses:

btn
container
row
col
card

PurgeCSS removes thousands of unused Bootstrap selectors.

The resulting CSS file becomes significantly smaller.

Method 3: Use Build Tools

Modern build tools can automatically optimize Bootstrap during production.

Common build tools include:

• Vite

• Webpack

• Parcel

• Gulp

These tools integrate with CSS optimization plugins that remove unused styles during the build process.

Example workflow:

Source Files
      ↓
Bootstrap CSS
      ↓
PurgeCSS
      ↓
Minification
      ↓
Optimized Production CSS

Method 4: Minify CSS

Minification removes unnecessary characters without changing functionality.

It removes:

• Comments

• Extra spaces

• Line breaks

• Indentation

Original CSS:

.btn {
    color: white;
    background: blue;
}

Minified CSS:

.btn{color:white;background:blue;}

This reduces the overall file size.

Method 5: Compress CSS Files

Web servers can compress CSS before sending it to browsers using technologies such as:

• Gzip

• Brotli

Example process:

Original CSS
220 KB

↓

Compressed

45 KB

The browser automatically decompresses the file after downloading it.

Measuring Unused CSS

Google Chrome DevTools provides a Coverage tool that identifies unused CSS.

Steps:

1. Open Chrome DevTools.

2. Open the Command Menu.

3. Search for "Coverage."

4. Start recording.

5. Reload the webpage.

6. Review the percentage of used and unused CSS.

Example output:

CSS File	Used	Unused
bootstrap.css	28%	72%

This information helps developers identify optimization opportunities.

Best Practices for Bootstrap Optimization

Import Only Required Components

Avoid loading the entire framework if only a few components are needed.

Avoid Multiple Bootstrap Versions

Including different Bootstrap versions increases CSS size and may cause styling conflicts.

Remove Unused Utility Classes

Large projects often contain obsolete utility classes that are no longer used. Regular code reviews help eliminate them.

Keep Third-Party Libraries Minimal

Additional UI libraries may duplicate Bootstrap functionality. Use only the libraries that are necessary.

Optimize Images Separately

Although image optimization is independent of CSS optimization, reducing image sizes further improves overall website performance.

Enable Browser Caching

Caching allows browsers to store CSS files locally, reducing download time for returning visitors.

Use Production Builds

Development versions of CSS are larger and intended for debugging. Always deploy minified, optimized production files.

Common Mistakes

Removing Required Classes

Some CSS classes may be generated dynamically through JavaScript. If optimization tools are not configured correctly, these classes might be removed, causing interface issues.

Ignoring Dynamic Content

Applications built with frameworks such as React or Vue often generate classes at runtime. Developers should configure optimization tools to preserve these classes.

Optimizing Before Development Is Complete

Running CSS optimization too early can remove styles that will be needed later. It is generally best to optimize during the production build.

Not Testing After Optimization

Developers should thoroughly test all pages and interactive components after removing unused CSS to ensure that no required styles have been accidentally removed.

Real-World Example

A company develops a business website using Bootstrap but only includes:

• Grid layout

• Navigation bar

• Cards

• Buttons

• Forms

Components such as carousels, tooltips, popovers, accordions, toasts, and scrollspy are never used.

Initial Bootstrap CSS size:

• 230 KB

After removing unused CSS with PurgeCSS:

• 42 KB

After minification:

• 34 KB

After Brotli compression:

• Approximately 11 KB transferred over the network

The results include:

• Faster page loading

• Reduced bandwidth usage

• Improved Google PageSpeed Insights scores

• Better Core Web Vitals

• Enhanced user experience, especially on mobile networks

Conclusion

Removing unused Bootstrap CSS is one of the most effective techniques for improving website performance. Since most projects use only a subset of Bootstrap's components, eliminating unnecessary styles significantly reduces file size, speeds up page rendering, and improves SEO and user experience. By combining custom Bootstrap builds, tools like PurgeCSS, CSS minification, compression, and production build workflows, developers can create lightweight, efficient websites without sacrificing Bootstrap's flexibility or functionality.