Developing On Top Of Bootstrap


We get a lot of questions about developing with Twitter Bootstrap. We love helping out fellow designers so we thought this would be a great Tutorial for beginners to learn the correct way to develop on top of Bootstrap.

 

So you’re starting a new responsive website design project and you have already created your mock ups and decided to use Bootstrap as your starting framework. Great choice! This tutorial is going to explain how to amend to the Bootstrap framework without altering the original code. Let’s get started!

 

THE PROBLEM

Most designers will dive right in and start altering Bootstrap’s CSS and code or use other tools to create custom Bootstrap builds which alter the core framework. What happens when it comes time to update Bootstrap’s core? Virtually it would be impossible trying to locate the CSS files that we changed.

 

THE SOLUTION

Build on top of Bootstrap and do NOT alter the original code. When Bootstrap updates the core all you need to do is replace the original Bootstrap CSS and JS file and your site is now updated. Can’t beat that!

 


 

Project File Structure

We are going to assume that you already know how to write CSS and that you have already downloaded Bootstrap’s core files. If you have not done so yet, you can download them from here. All though everyone is different, your website file structure should look something like this:

file Structure

Inside your CSS folder is where you are going to include the “bootstrap.min.css” file and inside the JS folder is where you will include the “bootstrap.min.js” file. We use the minified versions of these files just to be sure that we don’t alter them during development. Next you’ll want to create your own stylesheet named “main.css” or whatever you would like to call it and include it in the CSS folder.

 

Your HTML <head> code

Next we are going to show you how to layout the information included in your <head> tags on all of your HTML files. This is an important step! The order that you call your CSS files effect how you override Bootstrap’s core. See below for an example <head> code from our Plixis Theme.

 


Here is the breakdown. You need to include all of your meta information along with Doctype and any icons you are referencing. The important part here is to make sure that you include your own CSS file after the bootstrap.min.css. The browsers will read the last CSS file and use the code here to display the site. What does that mean for you? Any styles that you write in your own CSS file will override any existing styles before it. Now we can override Bootstrap without messing with it’s original core files.

 

The Nitty Gritty

Now that you have your CSS files set up correctly, let’s learn how to override Bootstrap’s core. One of the easiest tools to help locate the styles you want to change is Firebug for Firefox. You can download it here. For this example we are going to use the original Bootstrap navigation CSS and then override it with our own styles. The original Bootstrap navigation looks like this:

bootstrap nav

 

Using Firebug we can locate the Bootstrap styles used to create this navigation and write our own styles in our main.css file. The styles here will override Bootstrap’s core allowing for easier customization and updating in the future. Here is an example of our code below used to change the original Bootstrap navigation to this:

bootstrap nav new

 


 

In Conclusion

Developing on top of Bootstrap makes it easier for you to update to future versions of the core framework without harming your site. Hopefully this helps you have a better understanding of the best way that we have found to do this. Do you have a better way? Let us know your thoughts…