How to create an awesome blog template using Bootstrap 3 - Part II

Table of Contents

1. Introduction

Hi folks, I hope it didn't take too long to publish this second part. I was quite busy with a mobile app that came on the way (still working on it) that delayed things little. Thanks for everyone who showed interest in this tutorial. Do you know, your comments are the food for my "How to" tutorials. Please post your questions, ideas and appreciations as comments.

In the previous part, we saw how to create a decent blog template quickly using Bootstrap 3. If you haven't read it, I would encourage reading, though, it's not a necessity for reading this part. To follow this article, all you need is some basic knowledge in HTML and CSS. It would be great if you've some little knowledge on the CSS pre-processor language LESS.

If you've read part 1, I believe you should've already gained the knowledge to craft templates for any website using Bootstrap. But the fact is, all the created Bootstrap templates bear the same look and feel provided by the framework as default. The default theme provided by Bootstrap is good for wikis but not for an e-commerce website that sell top-notch products. Look does matters! It's very important that you should customize the theme to reflect your brand.

After reading this part, I'm sure you'll gain enough knowledge to decorate any Bootstrap template. You should also get a glimpse of the CSS pre-processor LESS and the immense benefits it brings to the stage. I would be happier if you learn the trade to create and sell dozens of website templates in a short time with less work and little creativity.

Alright, let's beautify our template!

2. Part II - Customize Bootstrap to create themes for our brand

This is how our blog template will be going to look after little make-up. Do you like it?

Bootstrap blog template

Fig 1. Bootstrap blog template

3. Approaches to customize Bootstrap theme

3.1 Web Page Theme

A theme refers to the design of the web page. It's a way to coordinate all the elements that go into making the web page so that they complement one another and reinforce the site's subject matter. When a web page theme works well, it presents a pleasing aesthetic to the viewer, keeps his interest and gives him a clear impression about the website's contents - stolen from here

The two very important elements that influence a website's theme are: typography and colour scheme. By changing these two elements we can create numerous web designs. In this workshop, we are going to create a custom theme by primarily customizing these two things.

The default theme provided by Bootstrap uses "Helvetica Neue" font face and white-gray colour scheme. We can customize the default theme of bootstrap through different ways.

  1. Overriding Bootstrap CSS styles
  2. Using Bootstrap's online download builder
  3. Using third-party tools like bootstrapthemeroller, bootswatchr
  4. Modifying LESS variables

3.2 Overriding Bootstrap CSS styles

This approach is very common. In this approach, we'll duplicate the Bootstrap CSS rules in our custom stylesheet, where we add new styles to it or override the existing ones. The custom stylesheet should be referenced below the bootstrap stylesheet.

For ex, Bootstrap applies the following style to the heading for a default panel.

                .panel-default > .panel-heading
	                color: #333; /*dark gray*/
	                background-color: #f5f5f5; /*light gray*/
	                border-color: #ddd; /*gray*/

Listing 1. Default style of panel

We can override the colours of the default panel by duplicating the selector and changing the values of properties in our custom stylesheet.

                .panel-default > .panel-heading
	                color: #fff; /*white*/
	                background-color: #c43e3e; /*red*/
	                border-color: #872525; /*dark red*/

Listing 2. Overridding panel style in custom stylesheet

This approach works well when the customization required for your website is little. When it requires more, then the stylesheet soon will become bloated with lot of rules exposing threat to maintenance (I really hate to see "!important" everywhere). Not only that, the worst part is, you are increasing the load of the page which makes performance suck.

3.3 Using Bootstrap's online download builder

Bootstrap provides an online download builder where you can customize the styles by easily changing a set of LESS variables (don't worry about LESS now I've a section dedicated for it) which will be finally compiled into couple of CSS files: bootstrap.css and bootstrap.theme.css. Not only that, the customization page also helps you to choose only the required components and plugins for your website; which will help to reduce the size of the generated CSS and JavaScript files.

This approach is not good when you've to frequently change the customization parameters. Every time you exclude a JavaScript plugin or modified couple of LESS variables you've to visit the customization page and start everything all over again. This approach is not productive for websites that needs to customize the look and feel, because in this case, we've to modify things frequently.

3.4 Using third-party tools like bootstrapthemeroller, bootswatchr

There are many online tools available that helps you to quickly wrap up nice themes. Couple of them I found on net are: bootstrapthemeroller and bootswatchr. There are many others too. Some are free and some are paid. Unlike Bootstrap's customization page, these tools provide side-by-side preview when you modify things which is very useful.

We are not going to this approach for many reasons. The main thing is, I want to teach you how you can do all this without using any tool.

3.5 Modifying LESS variables

Bootstrap is built on dozens of LESS files containing hundreds of variables which controls structure and style of all components. By modifying these variables you can bend Bootstrap as you wish. In this approach, we'll download the complete source code and update the required LESS variables manually. Finally, the modified LESS files are compiled into CSS which we'll be referencing from the html files.

This approach works well in most of the cases where you want to create a unique theme for your website. We are going to use this approach in our workshop.

4. Tools Needed

We need a text editor, LESS compiler, CSS minifier and any latest browser. I may recommend Firefox because of the add-ons like FireBug, ColourZilla which will help you very much in customization. In the previous part, I've suggested to use Sublime Text for editing html, CSS files. You can also download Sublime Text 3 which is still in beta at the time of writing this. Lot of new features can be added to Sublime Text through plugins. Without surprise, there are also plugins available for editing and compiling LESS files. The cool thing is, these plugins also minify the compiled CSS files.

There are other nice tools available for editing and compiling LESS and one of the popular one I used initially is Crunch. You cannot edit html files with Crunch and also it needs Adobe Air. Bootstrap uses Grunt for compiling CSS and JavaScript. If you are little familiar with node you can try that, for more information refer this page.

I realised a bit of inconvenience in using two tools: one for editing html, CSS and other for LESS. So I decided to go with one - Sublime Text.

The following are the tools I've used to complete this part.

  • Sublime Text 2
  • Firefox/Chrome

Feel free to explore and employ different tools. Don't forget to share that experience with me.

5. Download Bootstrap source-code and install plugins

In this section, we'll download the necessary libraries and tools. We've to download the Bootstrap source-code which contains the core LESS files that needs to be edited and compiled (we are not really going to modify them). We also need to download and configure couple of LESS plugins for Sublime Text.

Let's split the complete work into following tasks.

  1. Download Bootstrap source-code
  2. Download and configure LESS plugins for Sublime Text
  3. Setup the custom bootstrap folder

5.1 Download Bootstrap source-code

You can download the complete Bootstrap source-code from Git. Drop the downloaded zip file under the "lib" folder of our project and extract right there.

Extracting bootstrap source-code zip in 'lib'

Fig 2. Extracting bootstrap source-code zip in "lib"

When I was working on the first part the latest version of Bootstrap was 3.0.3 and now it's 3.1.1. There are no any breaking changes happened and we are good to upgrade.

5.2 Download and configure LESS plugins for Sublime Text

This is a little complicated task. I request you to follow the steps carefully. To install plugins for Sublime Text easily, I recommend you to install Package Control, which is a plugin by the way. Install Package Control as per the instructions specified in this page. Once you installed you need to restart Sublime Text. If your installation went fine, you can open the Package Control widow from the Preferences menu.

Opening Package Control from Preferences

Fig 3. Opening Package Control from Preferences

To work with LESS, we need to install two more plugins: sublime-less2css and LESS-sublime.

5.2.1 Install sublime-less2css

This plugin is used to run the compiler whenever you need to compile LESS to CSS. Let's install this plugin.

Open the Package Control from Preference menu.

Package Control

Fig 4. Package Control

Select the "Install Package" option.

Install Package

Fig 5. Install Package

After you selected the option, if you've a slow network... you may feel nothing is happening. But in the background, Package Control queries for all the packages, you can notice a simple progress message is displayed at the bottom status bar (Sublime Text really should improve in showing progress!). I was fooled many times thinking what the heck is going on? You've to wait with patience still the Package Control list down all the available packages.

Progress message in status bar

Fig 6. Progress message in status bar

Packages list

Fig 7. Packages list

Type "less" in the textbox and select the package with the name "Less2Css". Wait till the package get downloaded and installed, then restart Sublime Text. If everything goes fine you can see a new option "Less > Css" under Tools menu.

Remember I told you earlier this plugin runs a "compiler" when you need to compile LESS files. This compiler has to be installed separately. Without the compiler the plugin is futile! If you are using Windows machine, you've to download the compiler from here.

Download the latest zip and extract it anywhere you want. I've extracted the contents under C:\lessc\.

LESS compiler

Fig 8. LESS compiler

Next, to invoke the compiler from anywhere, you need to update the system environment variables. Append "C:\lessc\" to the value of Path variable after a semicolon.

Editing system variables

Fig 9. Editing system variables

To make sure you've done everything right, open the command prompt and type lessc -v. On enter, you should see the version no. of the compiler displayed in the console.

Testing compiler from command prompt

Fig 10. Testing compiler from command prompt

Restart Sublime Text. Now you are good to run compiler right from it. We've to do some configuration for this plugin before using it which we'll see in the "Setting up the project" section. If you've any problems in doing all these stuff please refer this link or post a comment.

5.2.2 Install LESS-sublime

This is just a syntax highlighter for LESS. Not mandatory though! Search the package with the name LESS and install it. Don't forget to restart Sublime Text after your installation to put the plugin in action.

Alright, now we've a single editor to work with all the files in this project. Let's spend some time on learning the basics of the LESS before dive into work.

6. Quick look into LESS

6.1 What is LESS? Why we need it anyway?

6.1.1 CSS Pre-processors and LESS

LESS is a CSS pre-processor. Well, what is a CSS pre-processor? To answer this question, I should tell you first some of the shortcomings of CSS. The fact is, CSS is old! Though CSS3 brings many advanced features but the language hasn't improved enough. Compared to other programming languages, CSS miss variables, functions and many other goodies. Without variables, we've to duplicate values of many things like font, colour throughout files. Whenever you need to change these values you've to rely mostly on Find + Replace.

Web designs are more like buildings, they exhibits mathematical properties - order, symmetry and limitation. If you think about the font-size of headings (h1, h2... h6), colour schemes, grids they all exhibits mathematical nature. Web designs can be created by applying mathematical principles that use variables and functions to represent properties, objects and their relationships. The idea of expressing designs using variables and functions helps to alter and create new designs very easily! It also helps you to maintain and extend your designs. Unfortunately, CSS don't have the ability to represent things in mathematical way and we've to lean on CSS pre-processors.

A CSS pre-processor helps you write CSS styles much like coding. You can use variables, functions, mixins and more. They are around us quite a long time and some of the famous ones in the market are: SASS, LESS and Stylus.

LESS is one of the popular CSS pre-processor and Bootstrap has chosen it for some good reasons. Let me show you some of the important language features of LESS.

6.1.2 Variables

In LESS, variables start with "@". They help to control the change of values from a single place. You don't have to duplicate a colour in dozen places and worry whenever you need to change (who easily get satisfied in choosing colours, huh?).

                @link-color:	#DAA019; // orange
                @link-color-hover: darken(@link-color, 15%); // brown

                    color: @link-color;


Listing 3. Variables in LESS

Generated CSS:

                    color: #DAA019;

                    color: #956E11;

Listing 4. Generated CSS

In the above LESS snippet, both @link-color and @link-color-hover are variables. darken() is a built-in LESS colour function that decrease the lightness of a colour to a certain amount passed to it as percentage.

LESS Functions

LESS provides lot of built-in functions for mathematical operations, colour processing and others. Some of the interesting functions that help to operate on colours are darken, lighten, spin and mix. - LESS functions reference

6.1.3 Mixins

Mixins helps you to mix a set of CSS properties wherever required. An example will help you understand easily.

                 .border-radius(@radius: 5px) {
                    border-radius: @radius;
                    -moz-border-radius: @radius;
                    -webkit-border-radius: @radius;

                #mypanel {
	                width: 300px;
	                .border-radius(@radius: 10px);

                #container {
	                .border-radius(@radius: 5px);

Listing 5. Mixins in LESS

Generated CSS:

                #mypanel {
	                width: 300px;
                    border-radius: 10px;
                    -moz-border-radius: 10px;
                    -webkit-border-radius: 10px;

                #container {
                    border-radius: 5px;
                    -moz-border-radius: 5px;
                    -webkit-border-radius: 5px;

Listing 6. Generated CSS

Can we use LESS in browsers?

Yes you can. For that, you've to reference less.js script file in your html pages after your stylesheets.


	                        <link rel="stylesheet/less" type="text/css" href="styles.less" />
                            <script src=""></script>

Listing 7. Referencing less.js to work directly with LESS in browsers

To know about the complete language features and functional reference visit the LESS website.

7. Exploring Bootstrap folders, especially the one named "less"

Let's come back to work. Open our project MyBlogTemplate in Sublime Text. Let's explore the bootstrap source code. If you remember, we've the complete bootstrap source code under the "lib" folder. Expand the folder "bootstrap-3.1.1" and you'll see a bunch of folders.

Bootstrap source code folders

Fig 11. Bootstrap source code folders

Following are the important folders and what they contain.

dist - This folder contains the distributable, compiled and minified CSS files, js files and fonts.

docs - Contains examples

js - Contains all the JavaScript plugins

less - Contains all the core LESS files where the total project is built on. It is from these LESS files, both the bootstrap.css and bootstrap.theme.css files are generated. This is the folder we are interested.

7.1 Looking close at "less" folder

The style of each Bootstrap component is controlled by a separate LESS file. For example, the style of buttons are controlled buttons.less. The style of modal windows are controlled by modals.less. Likewise, there are LESS files that controls the styles for dropdowns, form elements, tables, grids etc. There are some common LESS files exists in the folder. For example, the normalize.less file contains the basic styles defined for the html elements. The mixins.less file contains re-usable mixins that are used throughout the project. The two very important files in the folder are: variables.less and bootstrap.less.

7.1.1 variables.less  and bootstrap.less 

If you open the variables.less file, you can see hundreds of variables. Don't take those variables light! They are the ones that control typography, colour scheme, grid system and the styles of all the components. By changing the values of these variables you can customize Bootstrap as you want.


Fig 12. variables.less

The bootstrap.less file is the main one that imports all the others and compiles them into one CSS file.


Fig 13. bootstrap.less

8. Setting up the project

In this section, we'll create the necessary folders and files required initially. Let me rephrase the plan. I told you earlier we've to modify the source LESS files (mostly the variables) to customize the typography, colour system and other things. It's not a good idea to directly modify the source files, we may lose the track about the changes and it's difficult to upgrade to newer versions. There is a better idea! We can create our own LESS files, import the bootstrap source LESS files in them and override the interesting variables by duplicating them in the new files and assigning new values to it.

Let's break down the things into below four steps.

We are going to do the following things in this section.

  1. Create custom LESS files
  2. Set up output folder keep the compiled CSS files
  3. Configuring the settings for Less2Css plugin
  4. Update the Bootstrap references in HTML files

8.1 Create custom LESS files

Create a new folder called "less" at the root of the project to keep all our custom LESS files. We've to mostly modify the things in variables.less and bootstrap.less files. For that, we've to create couple of new LESS files custom.variables.less and custom.bootstrap.less.

In the custom.variables.less file, import the original variables.less file as shown below. We'll be overriding the interested variables here soon!

                @import "../lib/bootstrap-3.1.1/less/variables.less";

                // more code to follow

Listing 8. custom.variables.less

Copy the original content from bootstrap.less and paste it into the custom.bootstrap.less file. Replace the line that imports variables.less with custom.variables.less.

                // Core variables and mixins
                @import "custom.variables.less";
                @import "../lib/bootstrap-3.1.1/less/mixins.less";

                // Reset
                @import "../lib/bootstrap-3.1.1/less/normalize.less";
                @import "../lib/bootstrap-3.1.1/less/print.less";

                // Core CSS
                @import "../lib/bootstrap-3.1.1/less/scaffolding.less";
                @import "../lib/bootstrap-3.1.1/less/type.less";
                @import "../lib/bootstrap-3.1.1/less/code.less";
                @import "../lib/bootstrap-3.1.1/less/grid.less";
                @import "../lib/bootstrap-3.1.1/less/tables.less";
                @import "../lib/bootstrap-3.1.1/less/forms.less";
                @import "../lib/bootstrap-3.1.1/less/buttons.less";

                // Components
                @import "../lib/bootstrap-3.1.1/less/component-animations.less";
                @import "../lib/bootstrap-3.1.1/less/glyphicons.less";
                @import "../lib/bootstrap-3.1.1/less/dropdowns.less";
                @import "../lib/bootstrap-3.1.1/less/button-groups.less";
                @import "../lib/bootstrap-3.1.1/less/input-groups.less";
                @import "../lib/bootstrap-3.1.1/less/navs.less";
                @import "../lib/bootstrap-3.1.1/less/navbar.less";
                @import "../lib/bootstrap-3.1.1/less/breadcrumbs.less";
                @import "../lib/bootstrap-3.1.1/less/pagination.less";
                @import "../lib/bootstrap-3.1.1/less/pager.less";
                @import "../lib/bootstrap-3.1.1/less/labels.less";
                @import "../lib/bootstrap-3.1.1/less/badges.less";
                @import "../lib/bootstrap-3.1.1/less/jumbotron.less";
                @import "../lib/bootstrap-3.1.1/less/thumbnails.less";
                @import "../lib/bootstrap-3.1.1/less/alerts.less";
                @import "../lib/bootstrap-3.1.1/less/progress-bars.less";
                @import "../lib/bootstrap-3.1.1/less/media.less";
                @import "../lib/bootstrap-3.1.1/less/list-group.less";
                @import "../lib/bootstrap-3.1.1/less/panels.less";
                @import "../lib/bootstrap-3.1.1/less/wells.less";
                @import "../lib/bootstrap-3.1.1/less/close.less";

                // Components w/ JavaScript
                @import "../lib/bootstrap-3.1.1/less/modals.less";
                @import "../lib/bootstrap-3.1.1/less/tooltip.less";
                @import "../lib/bootstrap-3.1.1/less/popovers.less";
                @import "../lib/bootstrap-3.1.1/less/carousel.less";

                // Utility classes
                @import "../lib/bootstrap-3.1.1/less/utilities.less";
                @import "../lib/bootstrap-3.1.1/less/responsive-utilities.less";

Listing 9. custom.bootstrap.less

8.2 Set up output folder keep the compiled CSS files

Create a new folder called "bootstrap-custom" at the root of the project to keep all the compiled CSS files and the dependencies. Copy the contents of the "bootstrap-3.1.1\dist" folder and paste them into "bootstrap-custom" folder. Delete the Bootstrap CSS files from the "bootstrap-custom\css" folder. We'll create custom CSS files from the LESS files and drop them in that folder.

8.3 Configuring the settings for Less2Css plugin

We've installed the Less2Css plugin but we haven't seen how to use it yet. To use, first we've to configure it. Open the "Read me" file from Preferences > Package Settings > Less2Css > Read me. This file tells you about the purpose of the plugin, how to install it and configuration parameters. What we are interested now is about the configuration.

Some of the important configuration parameters are:

lessBaseDir: This folder is only used when compiling all LESS files at once through *Tools \ Less>Css \ Compile all less in less base directory to css*. This can be an absolute path or a relative path. A relative path is useful when your projects always use the same structure, like a folder named "less" to keep all your LESS files in. When compiling all files at once it will also process all subfolders under the base folder.

main_file: When you specify a main file only this file will get compiled when you save any LESS file. This is especially useful if you have one LESS file which imports all your other LESS files. Please note that this setting is only used when compiling a single LESS file and not when compiling all LESS files in the LESS base folder through *Tools \ Less>Css \ Compile all less in less base directory to css*.

minify: The allowed values are "true" and "false". When this setting is set to "true" the LESS compiler will be instructed to create a minified CSS file.

outputDir: Use this setting to specify the folder where the CSS files will be placed.

Take some time and go through each parameter in the configuration section. We are going to configure the above four parameters at the project level.

8.3.1 Creating Sublime Text project

Like any other plugin, we can configure Less2Css at global, user or project level. We are going to configure here at project level and for that first we've to convert the project folder to Sublime project. You can easily do that by opening the Project menu and select the "Save Project as" option. Give some name of the project like "MyBlogTemplate" and save it in the root. Two files will be created with names MyBlogTemplate.sublime-project and MyBlogTemplate.sublime-workspace. You cannot open the project directly by clicking the project files but you can do that from Sublime Text through the Project > Open Project option.

If you open the MyBlogTemplate.sublime-project in Sublime Text, you'll see the following content.

			                "path": "/D/MyBlogTemplate"

Listing 10. MyBlogTemplate.sublime-project

The value of the "path" will be different based on where you setup the project folder. To configure the parameters for the plugin, create a new node called "settings" below "folders". Under that, create one more node called "less2css" where we set the values for those parameters. If we need to configure other plugins, we've to separate nodes under "settings".

The base directory where all the LESS files exists in our project is "less". Since we've already defined the folder path, we can specify the relative path i.e. "less" to lessBaseDir. We want the generated CSS files to be stored in the "css" folder under "bootstrap-custom", so the value of outputDir is "bootstrap-custom\\css". The main-file is the one that imports all the LESS files and compiles to a single CSS file, without doubt it is "custom.bootstrap.less". Finally, we need to minify the generated CSS files and for that we've to set the property minify to true.

This is how the project file will look after these changes.

			                "path": "/D/MyBlogTemplate"
			                "lessBaseDir": "less",
			                "outputDir": "bootstrap-custom\\css",
			                "main_file": "custom.bootstrap.less",
			                "minify": true

Listing 11. MyBlogTemplate.sublime-project

8.3.2 Invoking the plugin

You can test the plugin is working fine by opening custom.bootstrap.less and just try to save it. When you do that, in the background the plugin invokes the compiler (you can see a command window open and close quick), compiles the LESS file and drops the minified CSS file custom.bootstrap.css into "bootstrap/css" folder. If something goes wrong, you'll see an error popped-up infront of you.

8.4 Update the Bootstrap references in HTML files

You've to update the Bootstrap references of all the HTML files to point to the generated CSS file i.e. custom.bootstrap.css.

	                <link href="bootstrap-custom/css/custom.bootstrap.css" rel="stylesheet" />
	                <link href="blog.css" rel="stylesheet" />
	                <script src="lib/jquery-2.0.3.min.js"></script>
	                <script src="bootstrap-custom/js/bootstrap.min.js"></script>

Listing 12. index.html

Note that, I did couple of more changes there. I removed the reference to the theme CSS file (bootstrap.theme.min.css) and updated the Bootstrap script reference to point to the one in the "bootstrap-custom" folder. The bootstrap theme CSS file is generated from a separate LESS file called theme.less file (which is not imported in the bootstrap.less). We are going to import that file also in our custom.bootstrap.less and hence all the styles will be compiled into the single CSS file - custom.bootstrap.css.

Our project setup is ready! Let's start customizing one of the principal components that influence the look of any website - typography.

9. Customizing Typography

9.1 Typography

Typography is the art of arranging type into legible, aesthetically pleasing and design-appropriate layout - from here

The word type in the above paragraph represents typeface. Sometimes typeface and font are used interchangeably, but they are different. Though typography is not only just selecting fonts but the choice of a font along with the other parameters can make a design hot-or-not.

9.2 Selecting custom web fonts

Many websites that display stunning typography utilizes different fonts for heading and content. The fonts for heading are mostly narrow and tall compared to the content. Bootstrap uses the same font "Helevtica Nueue" everywhere like heading, body and other places like forms, buttons etc. We are going to enrol two fonts for our website, one for heading and one for content.

9.2.1 Google Fonts

Though we've variety of desktop fonts to choose from I want to go for custom web fonts. One of the places you can shop for free is Google Fonts.

Google Fonts

Fig 14. Google Fonts

The Google Fonts website provides you search and filter tools to narrow down the font you are dreaming. It also provides preview about how each font appears when you use it in a word, sentence, paragraph or poster. You also have options to see the font in different styles (italic, bold) and grab the font link to quickly use in websites.

9.2.2 Body font

There is a constant battle between serif and sans-serif typefaces. Though I prefer the serif font "Times New Roman" in writing word docs, for web I would prefer to go with sans-serif for its calm and pleasing appearance. You can search for san-serif fonts by selecting only the "Sans-serif" option from the filters drop-down menu.

Sans-serif fonts

Fig 15. Sans-serif fonts

Some of the popular Sans-serif web fonts are: Open Sans, Roboto, Lato, PT Sans and Ubuntu. You can use any one of them or why not a different one? I didn't put much effort to search a better sans-serif font because I already know "Open Sans" will fit my need. All I wanted to do is to grab it's link from Google Fonts page to use in my pages. I just searched for "open sans" which gave couple of results. We've to use the one called "Open Sans" not "Open Sans Condensed".

Open Sans fonts

Fig 16. Open Sans fonts

Click the "Quick-use" menu at the right bottom which will take you to another page where you can select the styles, character sets required for the font. At the very middle you'll see a section called "Add this code to your website" where you can copy the link.

Open Sans quick use

Fig 17. Open Sans quick use

Drop the copied link to all the four html pages (index, single-post, contact and about-me) of our template.

                <!DOCTYPE html>
                <html lang="en">
	                <meta charset="utf-8">
	                <meta name="viewport" content="width=device-width, initial-scale=1.0">
	                <meta name="description" content="A Bootstrap Blog Template">
	                <meta name="author" content="Vijaya Anand">


	                <!-- Google fonts -->
	                <link href='' rel='stylesheet' type='text/css'>

	                <!-- Custom Bootstrap CSS file -->
	                <link href="bootstrap-custom/css/custom.bootstrap.css" rel="stylesheet" />
	                <link href="blog.css" rel="stylesheet" />



Listing 13. index.html

This will not make any change in the appearance because we haven't used the font anywhere in stylesheets. Wait, we are going to do that soon! Before that, let's select a nice font for heading too.

9.2.3 Heading font

I prefer headings to be tall and narrow. I don't bother much about the type, whether it is serif or sans-serif, for the time I stick with sans-serif. To search such fonts, along with selecting the "Sans serif" option in the filter I also have to select the Width.

Sans-serif narrow fonts

Fig 18. Sans-serif narrow fonts

There is variety of fonts that matches my requirement, like Oswald, Open Sans Condensed, Yanone Kaffeesatz and more. I would like to go with Yanone which I already used before and it's simply outstanding.

Yanone Kaffeesatz

Fig 19. Yanone Kaffeesatz

Click the Quick Use menu. In the "Choose the styles you want" section please select Light 300, Normal 400 and Bold 700 as well.

Yanone quick use

Fig 20. Yanone quick use

Finally grab the link and paste it to all the html pages.

9.2.4 Typography used by Bootstrap

You can know the important variables that control the typography of Bootstrap by visiting the Typography section of Bootstrap customization page. More than dozen variables listed out there control the typography. By changing the values of these variables you can customize the font, line-height and colour for content and headings of any website designed by Bootstrap.

Typography variables

Fig 21. Typography variables

I recommend you all to first check the Bootstrap customization page to know the different LESS variables that controls different things. Note that, the customization page doesn't contain all the variables. So if you don't find something interesting then it's better to check out the source files starting from variables.less. Most of the variables are present in variables.less but some do exists in individual LESS files.

Here is our plan to customize the typography. First we are going to customize the style (font-family, font size and line-height) for content (<body>). For that, we've to filter the variables shown in the above table that controls the content and change them according to our needs. Then, we are going to the same thing for headings (h1, h2...h6)

9.2.5 Customize the font-family, font size and line-height for content

The following are the variables that influence the typography of content.


We can group the above variables based on the property they influence like font-family, font-size and line-height. Overriding font-family

We've chose the "Open Sans" sans-serif font for the content. To apply that, we've to override the @font-family-sans-serif variable in our custom.variables.less file as shown below.

                @import "../lib/bootstrap-3.1.1/less/variables.less";

                @font-family-sans-serif: "Open Sans", sans-serif;

Listing 14. Overriding the body font-family in custom.variables.less

Of the three font-family variables, the san-serif is what assigned to @font-family-base which indeed assigned to <body>. You can understand this from scaffolding.less file.

                body {
                  font-family: @font-family-base;
                  font-size: @font-size-base;
                  line-height: @line-height-base;
                  color: @text-color;
                  background-color: @body-bg;

Listing 15. scaffolding.less

Just save the custom.variables.less file and you'll notice the custom.bootstrap.css file regenerated automatically. Alright, let's shoot the index.html file in the browser to see the changes.

After the body font is changed to 'Open Sans'

Fig 22. After the body font is changed to 'Open Sans'

You may not see a big change and it's because both the "Open Sans" and "Helevetica Nueue" are from the same sans-serif font-family. I felt the font size can be reduced little bit smaller, like 1px. The default font size for the body is 14px, which you can understand from the @font-size-base variable. Also, the paragraph looks little congested. We should increase the line height as well. Overriding font-size and line-height

Let's decrease the @font-size-base to 13px and increase @line-height-base to 1.8.

                @font-size-base: 13px;
                @line-height-base: 1.8;

Listing 16. Overriding the font-size and line-height in custom.variables.less

After decreasing the font-size to 13px

Fig 23. After decreasing the font-size to 13px

Much better now! Let's work on heading.

9.2.6 Customize the font-family, font size and line-height for heading

The style of heading is controlled by the following variables.


The default value of @headings-font-family is inherit, which means Bootstrap uses the same font-family for headings that is used for content. We are going to use "Yanone Kaffeesatz" as the heading font. Let's update the @headings-font-family variable and also the @headings-font-weight.

                @headings-font-family: 'Yanone Kaffeesatz', sans-serif;
                @headings-font-weight: 700;

Listing 17. Overriding the heading font style in custom.variables.less

After changing the heading font to 'Yanone'

Fig 24. After changing the heading font to 'Yanone'

The headings are a bit a small, isn't it? We've to definitely increase their size. The font-size of <h1>...<h6> is controlled by @font-size-h1...@font-size-h6. Following is the default value of these variables.

                @font-size-h1: floor((@font-size-base * 2.6))
                @font-size-h2: floor((@font-size-base * 2.15))
                @font-size-h3: ceil((@font-size-base * 1.7))
                @font-size-h4: ceil((@font-size-base * 1.25))
                @font-size-h5: @font-size-base
                @font-size-h6: ceil((@font-size-base * 0.85))

Listing 18. variables.less

All those variables depend upon @font-size-base. If you remember we've decreased the value of this variable to 1px. One quick and easy solution is to increase the value of @font-size-base which eventually increase the size of headings. But, I don't like that solution. I want the body font-size stay in 13px, so let's increase the decimal factor in the formulas.

Sometimes designers use mathematical principles (for ex. Fibonacci series) in setting font-sizes for headings elements. I don't know what principle Bootstrap has applied to choose those decimal numbers. Alright, to fix the size problem, I've to add 0.5 to all those decimal numbers.

                @font-size-h1: floor((@font-size-base * 3.1));
                @font-size-h2: floor((@font-size-base * 2.65));
                @font-size-h3: floor((@font-size-base * 2.2));
                @font-size-h4: floor((@font-size-base * 1.75));

Listing 19. Overriding the heading font-sizes in custom.variables.less

I've left the @font-size-h5 and @font-size-h6 to the default, because I rarely use them. Let's save the page and refresh the browser.

After adjusting the headings font-sizes

Fig 25. After adjusting the headings font-sizes

Much better! We've nearly done the customization required for typography but not complete. Note that, we've to customize the font of the text used in components like buttons and others. Don't worry about that now, we'll do that in "Customizing Components" section.

10. Customizing Colour Scheme

10.1 Colours in Web design

Colours have a great impact in web design. Not only in web, colours play a key role in every part of life like art, buildings, science and culture. Colours influence one's emotion. The impression of colours on users varies by culture, country etc. Coming back to web design, one should wisely choose the colours such that they should fuse with website content. It does not make much sense to use heavy black for a website that talks about health and medicine, probably green would be better! Colour theory itself is a separate science and as a web designer we should know the basics to utilize them efficiently in websites. Cameron has written an excellent series about colours and their usage in web design. Worth to read!

10.2 Colour palettes

Usually, websites uses a bunch of colours to beautify its content. This bunch of colours is typically called as "Colour Scheme" or "Colour Palette". There are lot of tools available to create colour palettes online. Some of the quick ones I found are: colourlovers, colorhunter and colorschemedesigner. Many tools help you to create colour palettes from images. You can use any one of these tools to create/choose colour palettes or select a palette and tweak it according to your wish. If nothing works, then you can create something from scratch. For our blog template, I faced a hard time to find a nice palette and finally... I ended up creating one from scratch!

10.3 Creating custom colour scheme for our blog template

Before creating the colour palette for our Bootstrap template, first we've to know the variables that control the colours. If you visit the Bootstrap customization page, there is a section that list out the LESS variables that control colours.

Colours Variables

Fig 26. Colours Variables

All these variables exist in the variables.less file.

10.3.1 Bootstrap's default colour scheme

You can split the colours into two groups: Gray and Brand Colours. Gray Colours

Gray colours are used to style body text, form controls, navigation links, panels etc. They are used to decorate text, backgrounds, borders etc.

Following are the variables that belongs part of Gray family.

                @gray-darker: lighten(#000, 13.5%);
                @gray-dark: lighten(#000, 20%);
                @gray: lighten(#000, 33.5%);
                @gray-light: lighten(#000, 60%);
                @gray-lighter: lighten(#000, 93.5%);

Listing 20. variables.less

I wish Bootstrap would have chosen generic variable names for the variables. Many times we choose different colours for these variables and it makes no sense at that time calling them "gray*". Unfortunately, we are also going to call these colours as "Gray colours" though we are going to assign different colours for these variables. The above variables can be represented by the below colour scheme.

Default Gray Colour Scheme

Fig 27. Default Gray Colour Scheme Brand Colors

Brand Colours are used in components like buttons, panels, progress bars and labels to represent different action or information. For example, if you take buttons, there are buttons to represent actions like success, warning, danger, info etc. For each action a separate brand colour is used. The same applies for panels and labels, where they are used to represent different information.

The following are the variables that control Brand Colours.

                @brand-primary: #428bca;
                @brand-success: #5cb85c;
                @brand-info: #5bc0de;
                @brand-warning: #f0ad4e;
                @brand-danger: #d9534f;

Listing 21. variables.less

Here is the colour scheme created by these variables.

Default Brand Colour Scheme

Fig 28. Default Brand Colour Scheme

10.3.2 Choosing different schemes for Gray and Brand colours

We are going to use shades of green to create the colour schemes for Gray and Brand colours. Creating custom scheme for Gray colours

Bootstrap has used pure black (#000) to create all the Gray colours. We are going to use a dark-grayish-green colour (I don't know the right name :).

Base colour for our custom gray colour scheme

Fig 29. Base colour for our custom gray colour scheme

Since the colour "#000" is hard-coded in all the formulas, we've to duplicate the complete code (shown in listing 20) in custom.variables.less. Instead of replacing "#000" to "#1F1F1B" directly in the formulas, let's assign that value to a new variable @gray-base and use it in the formulas.

                @gray-base: #1F1F1B;

                @gray-darker: lighten(@gray-base, 13.5%); // TODO:
                @gray-dark: lighten(@gray-base, 20%); // TODO:
                @gray: lighten(@gray-base, 33.5%); // TODO:
                @gray-light: lighten(@gray-base, 60%); // TODO:
                @gray-lighter: lighten(@gray-base, 93.5%); // TODO:

Listing 22. Overriding gray colour scheme in custom.variables.less

The below image shows our custom colour palette for Gray colours.

Custom Gray Colour Scheme

Fig 30. Custom Gray Scheme

You can feel a tinge of green in it, don't you? Let's create the colour scheme for brand. Creating custom scheme for Brand colours

To create this colour scheme, I altered the base colour (@gray-base) by mixing gray and white and produced bunch of different colours. I also used a secondary colour "orange" for @brand-success. Thanks to ColourZilla, which helped me immensely to work with colours.

Copy the brand variables to our custom.variables.less file and set the below values.

                @brand-primary: #AEAF57; // olive green
                @brand-success: #DAA019; // orange
                @brand-info: #EFEFC2; // light green
                @brand-warning: #CFCFB5; // dull green
                @brand-danger: #4F4F36; // army green

Listing 23. Overriding brand colour scheme in custom.variables.less

The below image represents the colour scheme created by these variables.

Custom Brand Colour Scheme

Fig 31. Custom Brand Colour Scheme

It's beautiful! I need one more brand colour to use in borders and other places in components. Let's call it as @brand-light which is not part of our brand colour scheme.

                @brand-light: #FBFFDF; // whitish green

Listing 24. custom.variables.less

10.3.3 Setting colours for body background, link and horizontal rule

Before you kick the compiler, I need you to update three more parameters: body background colour, link colour and horizontal rule border colour. The body background and link colours are controlled by the variables @body-bg and @link-color, which you can know form the Scaffolding section. The horizontal line border colour is controlled by @hr-border which you can know from the Miscellaneous section.

I want the body background to be light green (@brand-info) and the link colour to be orange (@brand-success). For the horizontal rule I'll go with dull green (@brand-warning).

Let's override those three variables in custom.variables.less.

                @body-bg: @brand-info;
                @link-color: @brand-success;
                @hr-border: @brand-warning;

Listing 25. custom.variables.less

That's it! Now save your changes and refresh the page with eyes wide open.

Blog Template

Fig 32. Blog Template

Wow! Isn't that looks cool? Yes, it is. We've customized the general colour scheme but still we've more work to do. We've to customize the colours for panels, buttons and other components. Let's do that next!

11. Customizing Components

We are going to customize the following components used in our template.

  1. Panels
  2. Wells
  3. Navigation bar
  4. Pager

Primarily we are going to change their colours and... some minor things.

11.1 Customizing Panels

More than dozen LESS variables control panel's colours, borders and paddings.

Panel Variables

Fig 33. Panel Variables

You can classify the panels into four types: default, primary, success, warning and danger.

In our blog sidebar, we've used the default type (@panel-default) and that's why you see the gray colour in heading background and borders.

Default Panels

Fig 34. Default Panels

It would look great if we apply some olive green (@brand-primary) to the heading background. For that, we've to replace all the default panels (panel-default) with primary panels (panel-primary). The primary panels uses the @brand-primary as the heading background.

Update the sidebars in index.html and singlepost.html files to replace the default panels to primary panels.

                <div class="panel panel-primary">
	                <div class="panel-heading">
		                <h4>Latest Posts</h4>
	                <ul class="list-group">
		                <li class="list-group-item"><a href="singlepost.html">1. Aries Sun Sign March 21 - April 19</a></li>
		                <li class="list-group-item"><a href="singlepost.html">2. Taurus Sun Sign April 20 - May 20</a></li>
		                <li class="list-group-item"><a href="singlepost.html">3. Gemini Sun Sign May 21 - June 21</a></li>
		                <li class="list-group-item"><a href="singlepost.html">4. Cancer Sun Sign June 22 - July 22</a></li>
		                <li class="list-group-item"><a href="singlepost.html">5. Leo Sun Sign July 23 - August 22 </a></li>

Listing 26. index.html

Save the files and refresh the browser.

Primary Panels

Fig 35. Primary Panels

Looks great! Actually, three things I want to fix in the primary panels. I don't like the striking green border (@panel-primary-border). It creates a discontinuity. Next, the background colour (@panel-bg) and heading text (@panel-primary-text) colours are so white!

Customizing Panels - Changing Colours

Fig 36. Customizing Panels - Changing Colours

Let's apply the @brand-info colour to the border which creates a smooth transition from body to panels. Next, replace the snow white from background and heading text with @brand-light.

                @panel-bg: @brand-light;
                @panel-primary-text: @brand-light;
                @panel-primary-border: @brand-info

Listing 27. Overriding panel variables in custom.variables.less

If you refresh the page, you see the background still white. The reason is, we are using "list groups" inside them and their default background is snow white. Let's change the LESS variable (@list-group-bg) that controls their background colour. Also, I need to replace their border colour (@list-group-border) to @brand-info.

                @list-group-bg: @brand-light;
                @list-group-border: @brand-info;

Listing 28. Overriding listgroup variables in custom.variables.less

Customizing List groups

Fig 37. Customizing List groups

Much better!

Let's work on the subscribe widget, which is still gray!

11.2 Customizing Wells

From the customization page, you know the two variables that control well's background and border.

                @well-bg: #f5f5f5;
                @well-border: darken(@well-bg, 7%);

Listing 29. Well variables

As default, the wells are filled by gray colour.


Fig 38. Wells

I would like to make the background and border colours same as panels i.e. @brand-light for background and @brand-info for border.

                @well-bg: @brand-light;
                @well-border: @brand-info;

Listing 30. Overriding well variables in custom.variables.less

Let's see how the widget looks now.

Customizing Wells - Changing Colours

Fig 39. Customizing Wells - Changing Colours

Hmm... not bad! I don't like the font style of the lead paragraph "Don't want to miss update? bah blah" inside the well. It's not stands out. I would like to set the typeface as "Yanone" and make it bold. But, if I customize the variables of "lead" it'll affect many places. Bootstrap doesn't provide variables to customize the font of lead paragraphs inside wells. These are the places we've to go more than modifying variables and this is one good example. Even in LESS files, we can write CSS. Let's apply the styles directly through CSS selector.

                @well-bg: @brand-light;
                @well-border: @brand-info;

                // There are no LESS variables available to override the styles of "lead" inside "well". So, we need this.
                .well {
                    .lead {
                        font-family: @headings-font-family;
                        font-weight: @headings-font-weight;
                        font-size: @font-size-h3;

Listing 31. Overriding "lead" inside wells in custom.variables.less

Customizing Wells - Fixing 'lead' font

Fig 40. Customizing Wells - Fixing "lead" font

I hope that'll attract lot of people to subscribe ;)

11.3 Customizing Navigation bar

The navigation bar is tar black! It gives a feel that the top one inch is sliced out :O.

Inverse Navigation Bar

Fig 41. Inverse Navigation Bar

I still love to have a dark colour in the place. How about the army green colour (@brand-danger)? Let's give a try, but before that, let's see the variables that control them.

Navbar Variables

Fig 42. Navbar Variables

That's a hell lot of variables! If you remember we've used inverse navigation bar (navbar-inverse), so we better concentrate only on those set of variables. We need to customize the background, link and brand colours.

After spending some time with Colourzilla I figured out the brand colours.

                @navbar-inverse-bg: @brand-danger;
                @navbar-inverse-link-color: @brand-primary;
                @navbar-inverse-link-hover-color: lighten(@brand-primary, 20%);
                @navbar-inverse-brand-color: @brand-success;
                @navbar-inverse-brand-hover-color:  lighten(@brand-success, 20%);

Listing 32. Overriding navigation variables in custom.variables.less

Customizing Navbar - Changing Colours

Fig 43. Customizing Navbar - Changing Colours

Not bad! The army green gives a good strong feel for the navigation bar. But I see some improvement required for the links. I want to make them bold possibly in a different font. There are no LESS variables provided to customize them. We've to do the same thing we did to customize the "lead" paragraph inside "well" component.

                .navbar-nav > li > a {
                    font-family: @headings-font-family;
                    font-size: 18px;
                    text-transform: uppercase;
                    font-weight: bold;

Listing 33. Overriding navigation links custom.variables.less

The above code is straight to understand. I've set the heading font to the anchor and increased the font size to 18px. I also made it bold and uppercase to make them exceptional.

This is how they look now.

Customizing Navbar - Changing links font

Fig 44. Customizing Navbar - Changing links font

Finally... we want to something for the gray submit button near the search-box. If you see the markup you can understand it's a default type button (btn-default).

                <button type="submit" class="btn btn-default">Submit</button>

Listing 34. Search button

Let's make the button primary. For that, we've to replace the btn-default CSS class to btn-primary. Do that in all html files.

                <button type="submit" class="btn btn-primary">Submit</button>

Listing 35. Changing search button's CSS class

Customizing Navbar - Fixing button

Fig 45. Customizing Navbar - Fixing button

Perfect! Don't worry about the brand text now. We'll replace it with a nice image at end.

11.4 Customizing Pager

The pagination links are really lost by the background. Hard to notice for poor eyes :(


Fig 46. Pagination

I'm not going to explain what I've done below to improve it. I believe you've knowledge to figure out yourself ;)

                @pagination-color: @brand-light;
                @pagination-bg: @brand-primary;
                @pagination-border: @brand-primary;

                @pagination-hover-color: @brand-primary;
                @pagination-hover-bg: @brand-light;
                @pagination-hover-border: @brand-primary;

                .pager {
                    li {
                        > a {
                            color: @pagination-color;
                        > a:hover,
                        > a:focus {
                            color: @pagination-hover-color;

Listing 36. Overriding pagination variables in custom.variables.less

Applying colours to links is little complicated and that's why we need the bottom snippet. You can see the power of LESS in applying styles to the different states of <a> element. How compact and easy it is!

Customizing Pagination

Fig 47. Customizing Pagination

That's it! We've customized most of the components used in our template. Still there are other components like thumbnails (we've used in aboutme page) you may have to take a look. Go through all the pages and make sure everything is perfect.

12. Customize miscellaneous parameters like gradients and shadows

Bootstrap uses a separate CSS file called bootstrap.theme.css for producing advanced CSS effects like shadows and gradients. If you remember, I asked you to remove the reference to it from all the html files earlier. The theme.less file is the one that contains all the gradient and shadow styles. To use it, we've to import it into our custom.bootstrap.less.


                // Theme
                //@import "../lib/bootstrap-3.1.1/less/theme.less";

Listing 37. Importing theme.less in custom.bootstrap.less

Save the file! Refresh the page!! See the magic!!!

Template after including theme.less

Fig 48. Template after including theme.less

Do you notice the gradients in buttons and shadows around panels, cool isn't it? It worked just like that. The theme.less file smartly used the LESS variables that we've overridden and that's why we don't need to do any additional work to achieve this.

There is a small glitch though. The subscribe widget not looks great like it was. I decided to get rid of the gradient effects for the "well" and for that I've to set the background-image to "none". And also I need to reset the border colour and apply the box shadow to blend the widget with the below ones.

                .well {
                    background-image: none !important;
                    border-color: @well-border !important;
                    .box-shadow(0 1px 1px rgba(0,0,0,.05)) !important;

	                .lead {
		                font-family: @headings-font-family;
		                font-weight: @headings-font-weight;
		                font-size: @font-size-h3;

Listing 38. Fixing "well" gradient effects in custom.variables.less

One final thing I've to do before wrapping the whole thing up is to replace the text ("Astrospace") in the logo with a beautiful image.

There are lot of tools available that helps you to design logo online. I've used and as the name it's cool! I've downloaded the generated image under a new folder called "images" at the root.

Dropping logo image in 'images' folder

Fig 49. Dropping logo image in "images" folder

Finally, modify the logo link to embed the downloaded image in all html files.


                <header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
	                <div class="container">
		                <div class="navbar-header">
			                <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
				                <span class="sr-only">Toggle navigation</span>
				                <span class="icon-bar"></span>
				                <span class="icon-bar"></span>
				                <span class="icon-bar"></span>

                            <!-- Logo Link -->
			                <a href="index.html" class="logo-link"><img src="images/logo.png" alt="Astrospace"></a>

Listing 39. Modifying the logo link

Since we've replaced the logo text with image we no more need the Bootstrap CSS class navbar-brand applied to the link. We've replaced it with our custom one called logo-link to create some margin around the image.

                a.logo-link {
	                display: inline-block;
                    margin-right: 10px;
                    margin-top: 2px;

Listing 40. blog.css

Save all your changes and refresh the page. You should see the below image.

Customized Bootstrap Blog Template

Fig 50. Customized Bootstrap Blog Template

That's it, we've completed the workshop! You've two things in your hands now: a beautiful blog template and the precious knowledge to craft and customize any website template using amazing Bootstrap.

13. Summary

In this two part series, we saw how to quicky create a nice template using Bootstrap and how we can customize quite easily through the CSS preprocessor language LESS. I hope you enjoyed this workshop. Please share your valuable thoughts, appreciations and questions through comments. I'll be more than happy to reply. Thanks for reading!

14. References

15. Revision History

  • 23/06/2014 - Published
  • 24/07/2014 - Minor corrections in article (Thanks to lonhosford)

Download Template  Fork in Git

blog comments powered by Disqus