Making A Bootstrap Theme From Source

I almost use bootstrap for every web project. But can’t use the same theme for every client. So, have to customize it based on the client’s profile. This is method I follow to make a custom bootstrap theme.

Installing Bootstrap Source Code

In order to make a custom bootstrap theme, lets install it using source code from the bootstrap’s official website.

Download the source code from here : Bootstrap Source

Copy it to your workspace and the expanded bootstrap source code folder looks like this.

Go to the bootstrap folder, and run npm install


npm install

If you do not have grunt installed, please execute the below command to install grunt globally.


npm install -g grunt-cli

Running Grunt in Watch Mode

Below are the list of bootstrap tasks that are available.

1. grunt dist -> Just Compile CSS and Javascript
2. grunt watch -> Watch for chages in less files and compile.
3. grunt tests -> Do tests.
4. grunt docs -> Build and test the docs assets
5. grunt -> Run everything.

We shall run grunt watch command so that when we change the .less files, it compiles and generates the new css.


grunt watch

Create a Simple HTML to Observe the changes

Let’s create a simple HTML file in the same bootstrap directory.


<!DOCTYPE html>
<html>
<head>
 <title>Custom Boostrap</title>
 <link rel="stylesheet" type="text/css" href="dist/css/bootstrap.css">
</head>
<style type="text/css">
 body {
 padding-top: 40px;
 }
</style>
<body>

<div class="container">

 <ul class="list-inline">
 <li>
 <button class="btn btn-primary">Primary</button>
 </li>
 <li>
 <button class="btn btn-success">Success</button>
 </li>
 <li>
 <button class="btn btn-danger">Danger</button>
 </li>
 </ul>
</div>
</body>
</html>

Real Fun – Edit Files

Open less/variables.less file, change the following and save them. Your grunt cmd window will show you the log of compilation.


@brand-primary:         #16324F; //darken(#428bca, 6.5%); // #337ab7
@brand-success:         #32E875; //#5cb85c;
@brand-info:            #357DED; //#5bc0de;
@brand-warning:         #f0ad4e;
@brand-danger:          #9E2B25; //#d9534f;

Refresh the html page in the browser, you should see the new colors applied for the buttons.
Note: I used https://coolors.co app for generating the colors.