Chris Hemsworth - Blackhat

Build Smaller Bootstrap CSS Upfront

Reviews Leave a comment

Scenario

Reduce the file size of bootstrap.min.cs to 15K or less increasing website response by 1 second or more by removing unnecessary components before customization.

  • Year: 2025
  • Difficulty: High
  • Implementation: 1-2 hours
  • Testing: 1-2 hours
  • Platform: Visual Studio 2022
  • Framework: Bootstrap 5.3.3
  • Tooling: Nodejs 22.13.0

Fream Principle: Prepare ahead of time or suffer during and afterwards.

Remove Unnecessary Components Upfront

While there are a few downloadable and online utilities (Purifycss, Purgecss, Unusedcss) to remove unused CSS automatically after a website is published, this approach is not recommended because of unreliable results often with required recurring subscription cost. Complex scripts with myriad options are usually required to get working first. Then file size may be greatly reduced, except your website won’t work because of missing characters or required components. Without testing, web pages may look fine visually but things like menus or forms may not function. See minimum required Bootstrap components below:

// Configuration
@import "functions";
@import "variables";
@import "mixins";
@import "utilities";

// Layout & components
@import "root";
@import "reboot";
@import "type";
@import "grid";
@import "buttons";
@import "forms";
@import "tables";
@import "nav";
@import "navbar";
@import "card";

// Utilities
@import "utilities/api";

Comment Out Unused Import Components

Edit the BOOTSTRAP.SCSS located in “../../node_modules/bootstrap/scss/bootstrap” of your Bootswatch Customization and comment out the layout components you didn’t use in your project code. You may need to experiment with removing certain components to make the resulting BOOTSTRAP.MIN.CSS smaller. Generally, the raw files size should be 150K or less to be 15K or less after compression.

/*!
 * Bootstrap v5.1.3 (https://getbootstrap.com/)
 * Copyright 2011-2021 The Bootstrap Authors
 * Copyright 2011-2021 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */

// scss-docs-start import-stack
// Configuration
@import "functions";
@import "variables";
@import "mixins";
@import "utilities";

// Layout & components
@import "root";
@import "reboot";
@import "type";
@import "images";
@import "containers";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
@import "transitions";
@import "dropdown";
@import "button-group";
@import "nav";
@import "navbar";
@import "card";
// @import "accordion";
@import "breadcrumb";
// @import "pagination";
@import "badge";
@import "alert";
// @import "progress";
@import "list-group";
// @import "close";
// @import "toasts";
// @import "modal";
@import "tooltip";
// @import "popover";
// @import "carousel";
// @import "spinners";
// @import "offcanvas";
@import "placeholders";

// Helpers
@import "helpers";

// Utilities
@import "utilities/api";
// scss-docs-end import-stack

Better Approach

Now when you compile your BOOTSTRAP.MIN.CSS the bloat has been automatically removed upfront with no complicated scripts or recurring cost. Less is more as you have better control and understanding of the process. The bonus is all pages will load faster.

  1. npm install -g grunt-cli
  2. grunt swatch:custom
  3. Copy bootstrap.min.css to your project and test

Leave a Reply