Modifying Bootstrap Installed Via Bower

If you are like many front-end web developers out there, you are most likely using some kind of front-end package management solution like Bower.

Recently whilst working on a project that required Bootstrap 3 (the SASS port) installed via Bower, I realised I needed to make some changes to buttons and fonts being used, the caveat of course being not editing the files within the bower_components folder itself, otherwise you can’t update them.

After trying different solutions like a custom Gulp.js runner task, I realised I was overcomplicating the solution. Here is what I believe to be the best solution

Copy the Bootstrap variables file from the Bower module to your local directory. In my case the file is: bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/_variables.scss – in my local directory I have a folder called “sass” and within that folder I have a folder called “modules” and within modules I create a new folder for each module modification, in this case I called it “bootstrap”

In my main SASS include, I simply reference the copied variables file first and then include Bootstrap after (see example code below)

// main.scss

// This is the copied version of the Bootstrap SASS variables file to a local SASS folder
@import "sass/modules/bootstrap/_variables.scss";

// Include Bootstrap itself
@import "bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap.scss";

Our copied variables file will take precedence over the one in the Bower module and presto, we can now modify Bootstrap in a clean way that won’t break when we upgrade.

This approach would also work for the standard LESS version of Bootstrap and other modules that work in this way too.