Bootstrap Git Submodule Workflow

I have used Bootstrap for projects in the past but I have always downloaded the precompiled bootstrap files. While this has worked easily in the past, there are some downsides.

• When Bootstrap is updated I have to remember to download the precompiled code and update the files in my local Git repository. Not that difficult if I remember to actually do it.
• I do not get the benefit of using the bootstrap less mixins and variables.
• Any changes I make to the bootstrap code is siloed in my own private Git repository for the project.

So, it’s time to tackle adding Bootstrap as a submodule within my Git repository. First I will fork Bootstrap, then I will add the submodule and compile bootstrap.

Fork bootstrap on GitHub

The first thing I chose to do was to fork the Bootstrap project. I did this so that if I desired to make any changes to the Bootstrap code I could do so, and commit the changes to my forked copy (and optionally issue a pull request).

Add Bootstrap Submodule

After forking Bootstrap the next step is to add the bootstrap submodule to my existing Git repository. I am going to put the submodule in the folder src/less/bootstrap.

$ git submodule add git@github.com:blove/bootstrap.git src/less/bootstrap

Note that you will need to replace the SSH clone URL in the line above with the one based on your fork. Or, if you prefer not to fork the bootstrap repository then enter the SSH clone URL of the bootstrap project.

$ git submodule add git@github.com:twbs/bootstrap.git src/less/bootstrap

Once you have added the submodule, the complete source code for bootstrap will be downloaded (this was not the case in older versions of Git).

Import bootstrap.less

The last step is to simply import the base bootstrap.less file. I have a base styles.less file that I use to import all the less files. I simply add the following line to the top of the file:

@import 'bootstrap/less/bootstrap.less';

Now I can use the Bootstrap LESS variables and mixins, including the media query variables.

Build Bootstrap

Optionally, you can also build the bootstrap.css file from source. Bootstrap uses Grunt for their build process. So, we will first install Grunt, then we will install the package dependencies using node package manager, and finally we will build Bootstrap using grunt.

Install Grunt:

$npm install -g grunt-cli

Install dependencies:

$ cd src/less/bootstrap
$ npm install

Compile Bootstrap:

$ grunt

Read More

You can then modify your grunt file to grab the bootstrap.min.css file from the dist/ directory. You can read more about using Boostrap LESS variables and mixins. I also suggest using the LESS Hat project that provides a ton of useful mixins that make cross-browser feature support much easier.