I really like the flexibility of bootstrap. But with great flexibility comes greater file sizes. I already customize bootstrap by loading only its sass files our project needs. One day I decided to go through and see how much css each module we normally use in a project actually brings to the page load. This is what we discovered. The y axis is in kilobytes and this is the non-minified files.

The flex module being the largest was the first place to minimize. It’s a relatively simple mixin that can be adjusted to remove flex classes you don’t expect to use. For example, one group of classes removed was the align-content-
(not to be confused with the useful align-items-
classes). I brought this from 35KB to 10KB. Spacing was the next to be looked at. I altered this mixin and removed all the *y, *x, and negative value classes we do not use. This took that from 28KB to 17KB.
We use a custom bootstrap.scss file in our project that calls the sass files in the node_modules/bootstrap.sass
directory. For the flex and spacing, we copied their respective sass file into the project directory and altered it there.
There is also a variable called $theme_colors
that is an array. It creates many different button classes we hardly use. For example, btn-danger
, or btn-success
. To remove the extraneous buttons, I altered the array in the theme’s _variables.scss
file only to discover that it still produces all the extraneous buttons. I found that while most bootstrap variables use the !default
declaration preventing bootstrap from overriding our already declared variables, the $theme_colors
uses a map_merge()
Sass function and put all the elements back into the array. To fix this I @import
ed our custom variable file again right before @import
ing the button sass file.