How to Remove Unused Bootstrap CSS Efficiently

To remove unused Bootstrap CSS, use tools like PurifyCSS, PurgeCSS, or UnCSS that scan your HTML and JavaScript to keep only the CSS classes you use. Alternatively, customize Bootstrap by selecting only needed components via their Bootstrap Customize tool or by using Bootstrap's source SCSS files and compiling only required parts.

Syntax

Using a tool like PurgeCSS involves specifying your content files and CSS files to scan and clean.

Example command line syntax:

• purgecss --css path/to/bootstrap.css --content path/to/**/*.html path/to/**/*.js --output path/to/clean-css/

Explanation:

• --css: Path to the original Bootstrap CSS file.
• --content: Paths to your HTML and JS files where CSS classes are used.
• --output: Folder where the cleaned CSS will be saved.

bash

purgecss --css bootstrap.css --content index.html scripts.js --output clean-css/

Example

This example shows how to use PurgeCSS with Node.js to remove unused Bootstrap CSS classes from your project.

javascript

import purgecss from '@fullhuman/postcss-purgecss';
import postcss from 'postcss';
import fs from 'fs';

const bootstrapCSS = fs.readFileSync('bootstrap.css', 'utf8');

postcss([
  purgecss({
    content: ['index.html', 'app.js'],
    defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
  })
])
  .process(bootstrapCSS, { from: undefined })
  .then(result => {
    fs.writeFileSync('bootstrap.cleaned.css', result.css);
    console.log('Unused CSS removed and saved to bootstrap.cleaned.css');
  });

Output

Unused CSS removed and saved to bootstrap.cleaned.css

Common Pitfalls

Common mistakes when removing unused Bootstrap CSS include:

• Not including all HTML and JS files in the tool's content paths, causing needed styles to be removed.
• Using dynamic class names in JavaScript that tools can't detect, leading to missing styles.
• Removing Bootstrap's utility classes that are used indirectly.

To avoid these, always:

• Include all files where classes appear.
• Use whitelist or safelist options to keep dynamic or important classes.
• Test your site thoroughly after cleaning CSS.

bash

/* Wrong way: Missing JS files in content */
purgecss --css bootstrap.css --content index.html --output clean-css/

/* Right way: Include all relevant files */
purgecss --css bootstrap.css --content index.html app.js components/**/*.js --output clean-css/

Quick Reference

Summary tips for removing unused Bootstrap CSS:

• Use PurgeCSS, UnCSS, or PurifyCSS to scan your project files.
• Customize Bootstrap source SCSS to include only needed components.
• Always safelist dynamic or JavaScript-generated classes.
• Test your site visually after cleaning CSS to catch missing styles.
• Consider using Bootstrap's Customize tool for smaller builds.

Key Takeaways

Use tools like PurgeCSS to automatically remove unused Bootstrap CSS classes.

Include all HTML and JavaScript files in the tool's scan to avoid removing needed styles.

Safelist dynamic or JavaScript-generated classes to keep them in the final CSS.

Customize Bootstrap SCSS source to build only required components for smaller CSS.

Always test your website after removing unused CSS to ensure styles are intact.