Programming Web Technology

Customize your own version of Bootstrap

Bootstrap is a great starter framework, I use it almost everyday. However sometimes you want to customize it to your needs. While you can use the Customize tool on the official website which is very handy, but you may want to automate the build and integrate with your workflow, this is the tutorial for you.

Some preparation

Install Node.js, Bower and Grunt if you have not.

I have created a Github repo “mybootstrap” which contains all of the boilerplate code. We will be using it in this tutorial. Don’t panic, I’ll explain what those files are and which file you can edit.

What’s in the folder

  • /Makefile: contains 3 tools to use, which are “make init”, “make compile” and “make clean”
  • /package.json: the packages needed for the Grunt build tool, generally you don’t need to modify this file
  • /gruntfile.js: This file defines how Grunt build the Bootstrap
  • /bower.json: This tells Bower what Bootstrap version to pull, modify it only if you want a different Bootstrap version.
  • /src/less/bootstrap.less: This is the “index” of all bootstrap source files, this tells the Less compiler what files to import, I copied the bootstrap.less from the bootstrap source and modify the path such that only variables.less is replaced
  • /src/less/variables.less: This is bootstrap’s main variables config file, most of the time you only need to change this file.

Build the first custom version of  Bootstrap

Change some variables

For example, you can change the font-size-base from 14px to 12px, then run “make compile” again.

Run “make compile” again, you you will find the resulting code in the “public” folder.


Share your thoughts