Lean Sass imports

When using Sass in your asset pipeline, make sure you optimize Bootstrap by only @importing the components you need. Your largest optimizations will likely come from the Layout & Components section of our bootstrap.scss.

  1. // Configuration
  2. @import "functions";
  3. @import "variables";
  4. @import "mixins";
  5. @import "utilities";
  7. // Layout & components
  8. @import "root";
  9. @import "reboot";
  10. @import "type";
  11. @import "images";
  12. @import "containers";
  13. @import "grid";
  14. @import "tables";
  15. @import "forms";
  16. @import "buttons";
  17. @import "transitions";
  18. @import "dropdown";
  19. @import "button-group";
  20. @import "nav";
  21. @import "navbar";
  22. @import "card";
  23. @import "accordion";
  24. @import "breadcrumb";
  25. @import "pagination";
  26. @import "badge";
  27. @import "alert";
  28. @import "progress";
  29. @import "list-group";
  30. @import "close";
  31. @import "toasts";
  32. @import "modal";
  33. @import "tooltip";
  34. @import "popover";
  35. @import "carousel";
  36. @import "spinners";
  38. // Helpers
  39. @import "helpers";
  41. // Utilities
  42. @import "utilities/api";

If you’re not using a component, comment it out or delete it entirely. For example, if you’re not using the carousel, remove that import to save some file size in your compiled CSS. Keep in mind there are some dependencies across Sass imports that may make it more difficult to omit a file.

Lean JavaScript

Bootstrap’s JavaScript includes every component in our primary dist files (bootstrap.js and bootstrap.min.js), and even our primary dependency (Popper) with our bundle files (bootstrap.bundle.js and bootstrap.bundle.min.js). While you’re customizing via Sass, be sure to remove related JavaScript.

For instance, assuming you’re using your own JavaScript bundler like Webpack or Rollup, you’d only import the JavaScript you plan on using. In the example below, we show how to just include our modal JavaScript:

  1. // Import just what we need
  3. // import 'bootstrap/js/dist/alert';
  4. // import 'bootstrap/js/dist/button';
  5. // import 'bootstrap/js/dist/carousel';
  6. // import 'bootstrap/js/dist/collapse';
  7. // import 'bootstrap/js/dist/dropdown';
  8. import 'bootstrap/js/dist/modal';
  9. // import 'bootstrap/js/dist/popover';
  10. // import 'bootstrap/js/dist/scrollspy';
  11. // import 'bootstrap/js/dist/tab';
  12. // import 'bootstrap/js/dist/toast';
  13. // import 'bootstrap/js/dist/tooltip';

This way, you’re not including any JavaScript you don’t intend to use for components like buttons, carousels, and tooltips. If you’re importing dropdowns, tooltips or popovers, be sure to list the Popper dependency in your package.json file.

Default Exports

Files in bootstrap/js/dist use the default export, so if you want to use one of them you have to do the following:

  1. import Modal from 'bootstrap/js/dist/modal'
  3. const modal = new Modal(document.getElementById('myModal'))

Autoprefixer .browserslistrc

Bootstrap depends on Autoprefixer to automatically add browser prefixes to certain CSS properties. Prefixes are dictated by our .browserslistrc file, found in the root of the Bootstrap repo. Customizing this list of browsers and recompiling the Sass will automatically remove some CSS from your compiled CSS, if there are vendor prefixes unique to that browser or version.

Unused CSS

Help wanted with this section, please consider opening a PR. Thanks!

While we don’t have a prebuilt example for using PurgeCSS with Bootstrap, there are some helpful articles and walkthroughs that the community has written. Here are some options:

Lastly, this CSS Tricks article on unused CSS shows how to use PurgeCSS and other similar tools.

Minify and gzip

Whenever possible, be sure to compress all the code you serve to your visitors. If you’re using Bootstrap dist files, try to stick to the minified versions (indicated by the .min.css and .min.js extensions). If you’re building Bootstrap from the source with your own build system, be sure to implement your own minifiers for HTML, CSS, and JS.

Nonblocking files

Help wanted with this section, please consider opening a PR. Thanks!

Always use https

Help wanted with this section, please consider opening a PR. Thanks!