Click here to Skip to main content
15,868,141 members
Articles / Web Development / LESS

How to Customize Twitter Bootstrap to Fit Your Web Design

Rate me:
Please Sign up or sign in to vote.
4.96/5 (33 votes)
16 May 2013CPOL8 min read 226.6K   1.9K   67   40
A brief guide for web developers, describing how to customize Twitter Bootstrap for their web designs

Introduction

The process of converting the graphical design of a web page to HTML and CSS have always been a big challenge when every single Web Browser out there, renders your design the way it understands and that's not the way you designed it.

Fortunately, recently, some of the experienced web designers around the world, started some projects known as web front-end frameworks which help web developers focus on their design instead of testing their page across different browsers fixing the browser comparability problems.

Image 1

"Twitter Bootstrap" is one of the popular frameworks on the web that has been created by Mark Otto and Jacob Thornton, Twitter developers.
(Many thanks to them.)

The usage documents on the Bootstrap website are really complete (Getting Started - Bootstrap), plus many other articles all around the web, explaining how to use the Bootstrap's grid systems and components, but this framework has a default graphical design and although the design is so nice and beautiful, that's not fun to repeat the same design across all the websites that use Bootstrap as the layout framework.

So, I decided to write this article and explain how to customize the Bootstrap framework to fit your own styles and design.

Here we go...

Requirements

Important: To complete this tutorial, use must have basic knowledge of the Less language.

Image 2

First, download the Bootstrap bundle from the Github website here: https://github.com/twitter/bootstrap.

Image 3

Then, you need a web-browser equipped with "Developer Tools", ideally a "WebKit Browser". I'm using "Apple's Safari Browser" that is my favorite one. You can download "Google Chrome Browser" here: https://www.google.com/intl/en/chrome/browser/.

Also, you need a "Text Editor" of your choice ideally with "HTML" and "Less" highlighting (I used Sublime Text 2) and a way to compile your less files, which is explained on Less official website.
(I will use Less.app.)

Setup the File Structure

Extract the ZIP file you downloaded earlier from Bootstrap's Github page and take a look inside the extracted folder.

Image 4

The tree "less", "js" and "img" folders are the main folders for every Bootstrap web design.
Inside the less folder, less files are localed that together will form the bootstrap CSS framework.

If you look carefully, you will find a "test" folder located inside the less folder.
This folder includes some HTML files that are some simple bootstrap layouts. These could be used for customization purposes, but I will create my own test page, including the main components that I will customize.

Image 5

I created a simple bootstrap layout, combining some components from the test files explained above.
My page is made up of two "navbar"s, "hero-unit", "button"s, "dropdown" and "dropup" menus.

Image 6

As I mentioned earlier, bootstrap is a framework and everyone knows that it is not a good practice to change the main framework files to customize it. Why?

Because, first, this framework may get updates from time to time and that way, you will need to do the customization to the new version again!
Also, that way, you may mess up the frameworks files and the framework may not work the proper way again!

So because of the reasons explained above, I have created a folder structure that will hold the bootstrap original folder and files inside a folder named after the framework (excluding the "test" folders from "less" and "js" folders), a less folder to hold my own less files that I will explain later, an img folder for future images that I will add to my pages and finally a js folder that will hold the 3rd party JavaScript libraries and possibly my own JavaScript files.
Then, I placed my index.html file close to these folders.

Image 7

The next step is to add my own less files that override and customize the main framework to my own less folder.

Bootstrap includes two main files that if overridden, almost the whole framework will be overridden and customized.

These files are "variables.less" and "bootstrap.less".

Image 8

Image 9

I created a "custom-variables.less" and a "custom-bootstrap.less" files to override equivalent original files and additionally a "my-bootstrap-theme.less" to include additional custom less code and compile the whole setup into a single CSS file named "my-bootstrap-theme.css".

Image 10

I made an exact copy of the "variables.less" and "bootstrap.less" files inside my own custom files and changed the files urls inside my custom bootstrap.less to correspond to the framework files inside the bootstrap folder and changed the "variables.less" file url to correspond to my own "custom-variables.less" file so the compiling file will include the framework with my customizations.

Image 11

In the next step, I extracted the default bootstrap colors and used "ColorSchemer Studio" to spin the colors and make them a little warmer.

I also made the gray family colors a little warmer so the white and black are not absolute white and black.
(Any other colors could be added and used in the file, there are no limits.)

Image 12

Image 13

So I replaced the colors inside custom-variables.less file with new colors.
And I also changed the body background and body text colors.

Image 14

Before I get further, we need a real-time style update corresponding to our changes in less files.

To do so, I downloaded the "less.js" file from Less official website.

Image 15

And I followed the instruction on the page to setup my bootstrap page for live preview.

Image 16

Important: Because of the fact that less.js library loads the .less files using Ajax, and most of the modern browsers do not allow cross-domain Ajax file access, you need to run a simple HTML server on your workstation and view your page on http://localhost/ sub-urls for Ajax requests to be valid and less.js would be able to render your .less files at real-time.
(For this article, I used Mac OS X's WebSharing option that is a simple Apache server setup.)

As you can see in the picture above, I included both original bootstrap.less file and my own my-bootstrap-theme.less files so we can switch back to the original framework and see the difference.

Here we go, when we access the web server address, our page would be rendered using less.js and we can see the actual appearance of our layout.

Image 17

Inside the my-bootstrap-theme.less file, I imported the custom-bootstrap.less file that by itself imports the custom-bootstrap.less.

So I switch the .less file inside my HTML file by commenting the original file and uncommenting the my-bootstrap-theme.less and start dealing with variables inside the custom-variables.less file.

Image 18

But before getting into customization, here is a small trick that will make your life easier.
Normally, you have to reload the page to see the changes you have made and saved inside your less files but the less.js library introduces a feature that cuts the need of reloading the page:

Append the #!watch query to the end of the url to your page, reloads the page with new query string and that's it. No more need for reloads.

Image 19

Here, I have made a change inside the custom-variables.less file to the hero-unit class and after I saved the file, my page updated automatically to show the changes.

Image 20

Image 21

Changing the colors inside the less file is easy and you can use the less built-in functions to tune the color and then see the result by auto update feature of less.js. But there are times that you need a more straight and quick way of testing the CSS values, and that's the time when the "Developer Tools" come to scene.

I want to adjust the corner radius of the buttons and I want to play with the value and see the instant update to the buttons.

Right-click on the element of your choice and select "Inspect Element" and "Developer Tools" appear including a panel, manipulating the HTML element tags on the left and another panel showing the CSS rules and values on the right that allows you to change the CSS value and see the instant update to the element in the browser window.

Image 22

Here, I am changing the corner size value and I can see the result in the browser window.

Image 23

Using Our Knowledge

I have changed the buttons' borders and background color (including the gradient), body background and text colors, hero-unit background color, navbars' regular and inverse colors and some other changes to the variables inside the custom-variables.less file and our custom bootstrap theme is almost ready.

Image 24

Image 25

Image 26

Image 27

Let's do the final steps.

Final Steps

Finally, I wanted to adjust some values that are not located inside the variables.less file.
Some of the components including the dropdown menus, have less styling that are located inside the direct component files, and because of that, they could not be overridden from inside the variables.less file. In such situations, there are two solutions to do our adjustments.

First and not preferred one (by me) is to create a less file like custom-dropdown.less and use the classes inside the original file to override the changes. But that makes you create too many files.

The second solution is to copy the corresponding class from the original file and insert it into a single file (that I have already created and named it my-bootstrap-theme.less) and set the styling and if needed, create separate sections using comments to be able to find them easily.
And that's exactly the way I did it.
And here is my final my-bootstrap-theme.less file.

Image 28

So our customization less files are ready and we can compile the final .css file.

There are some ways to do this process out there but I preferred a ready to use tool and I chose "Less.app" application and just compiled the "my-bootstrap-theme.less" file into "my-bootstrap-theme.css" file.

Image 29

Finally, I updated the index.html to link the recently generated .css file and commented out the less files and less.js references so my page only stands on pure CSS.

Image 30

And here is our new bootstrap theme fully functional and customized.

Image 31

Hope you enjoyed it and we will see many new bootstrap themes around soon.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Founder Sojaner AB
Sweden Sweden
UX designer and full stack developer mainly focused on .NET technologies.
Currently loving .NET Core 2.0.

Comments and Discussions

 
QuestionQuestion Pin
Member 1295668218-Jan-17 8:19
Member 1295668218-Jan-17 8:19 
Praisenice tutorial! Pin
garevalo27-Dec-15 8:17
garevalo27-Dec-15 8:17 
GeneralNice Tutorial Pin
Member 1103965026-Aug-14 23:36
Member 1103965026-Aug-14 23:36 
GeneralRe: Nice Tutorial Pin
Rojan Gh.6-Feb-15 6:53
professionalRojan Gh.6-Feb-15 6:53 
QuestionVery helpful article Pin
After205027-Jun-14 8:44
After205027-Jun-14 8:44 
GeneralRe: Very helpful article Pin
Rojan Gh.28-Jun-14 2:32
professionalRojan Gh.28-Jun-14 2:32 
GeneralRe: Very helpful article Pin
After205028-Jun-14 17:29
After205028-Jun-14 17:29 
SuggestionBootstrap Customize Pin
Member 1082262915-May-14 21:22
Member 1082262915-May-14 21:22 
QuestionHappy to found your article. Pin
Member 107962855-May-14 6:29
Member 107962855-May-14 6:29 
Questionnice work Pin
timwaagh7-Feb-14 4:49
timwaagh7-Feb-14 4:49 
GeneralRe: nice work Pin
Rojan Gh.7-Feb-14 7:06
professionalRojan Gh.7-Feb-14 7:06 
GeneralMy vote of 5 Pin
JMK8922-Oct-13 6:05
professionalJMK8922-Oct-13 6:05 
GeneralRe: My vote of 5 Pin
Rojan Gh.9-Nov-13 23:39
professionalRojan Gh.9-Nov-13 23:39 
Questioni am getting plain text Pin
Member 1028558919-Sep-13 13:11
Member 1028558919-Sep-13 13:11 
QuestionHow to change the directory of index.html? Pin
jelefra22-Jul-13 4:26
jelefra22-Jul-13 4:26 
GeneralRe: How to change the directory of index.html? Pin
Rojan Gh.22-Jul-13 4:38
professionalRojan Gh.22-Jul-13 4:38 
GeneralRe: How to change the directory of index.html? Pin
jelefra22-Jul-13 5:25
jelefra22-Jul-13 5:25 
AnswerRe: How to change the directory of index.html? Pin
Rojan Gh.22-Jul-13 5:38
professionalRojan Gh.22-Jul-13 5:38 
GeneralRe: How to change the directory of index.html? Pin
jelefra22-Jul-13 5:56
jelefra22-Jul-13 5:56 
GeneralRe: How to change the directory of index.html? Pin
Rojan Gh.22-Jul-13 6:01
professionalRojan Gh.22-Jul-13 6:01 
GeneralRe: How to change the directory of index.html? Pin
jelefra22-Jul-13 6:08
jelefra22-Jul-13 6:08 
GeneralRe: How to change the directory of index.html? Pin
Rojan Gh.22-Jul-13 6:11
professionalRojan Gh.22-Jul-13 6:11 
GeneralRe: How to change the directory of index.html? Pin
jelefra22-Jul-13 6:17
jelefra22-Jul-13 6:17 
AnswerRe: How to change the directory of index.html? Pin
Rojan Gh.22-Jul-13 6:49
professionalRojan Gh.22-Jul-13 6:49 
AnswerRe: How to change the directory of index.html? Pin
jelefra22-Jul-13 12:25
jelefra22-Jul-13 12:25 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.