Twitter Bootstrap Part 2: Design a Responsive Homepage

By July 23, 2012 Tutorial 2 Comments

Twitter Bootstrap is a cutting edge front end framework designed to make the lives of developers and designers a little easier, as it provides a semantic and responsive starting point for real world projects. Today we are going to take a bit of time to focus on a very real world project, the single page site or splash page. We have already covered a bit of design theory in our “Z” design post, and we will be using many of the same techniques.

If you are new to Bootstrap, it may be a good idea to get an understanding of what Bootstrap is and how you can use it, as featured in our part 1 of our series.


Check Out The Whole Series!
Twitter Bootstrap Part 1: What is Bootstrap Anyway?
Twitter Bootstrap Part 2: Design a Responsive Homepage
Twitter Bootstrap: Build A Stunning Two Column Blog
Twitter Bootstrap Part 3: Design a Responsive Contact Page

View The Demo

Let’s Get Started

Let’s take a look at what we will be building today.

Here, we have what is considered a fairly “best practice” example of a “Z” design layout homepage. As such, our image features the Bootstrap navigation bar, a featured content carousel or slider, a standard call to action with an accented button color as well as three columns of content.

We should take note at this point that in no way is this a set-in-stone required layout for your next project. Inherently, this is the real beauty of using a front end framework. Would you like to achieve a different layout? Go for it, with a little bit of math (including the ability to count to twelve) you can achieve any number of layouts.

Take it From the Top:

In this tutorial, I am going to assume that you have already read through our first post about the framework, downloaded it and unzipped it to somewhere easy like your desktop. Now, you are going to need a text editor so that we can manipulate the HTML/CSS and JavaScript. Depending on your platform, there are many great free programs to choose from. However, I have come to enjoy the excellent Sublime Text 2.

Set Up The Navigation

The Navigation portion of our site is relativly easy to integrate. However, one should take note that the default navigation style included with Bootstrap is “Fixed” to the top of your page. This allows for the navbar to stay within the view of users as they navigate your site.

The Slider

Call To Action

Footer & Finishing Up


I hope you have enjoyed this tutorial. Twitter Bootstrap is a fantastic tool that will allow for faster development and more user satisfaction in any project. Do you have a web design or development question for us? Drop us a note on our contact page, and we will get back with you as soon as possible.

About Brock Nunn

Brock Nunn is a web designer and developer specializing in building custom WordPress for over three years. Brock operates through his company Brock Nunn Web Design offering clients personal service with outstanding results. You can follow Brock on twitter @banunn.

2 Comments

  • VINCENT C FULCO says:

    Hey Brock- Great tuts esp. for newbie designers or those who simply don’t have the coin to hire a pro yet! Can twitter::bootstrap code be brought into wordpress directly or does it require a lot of modding? It is not obvious to those new to the field. There would seem to be some pre-made combo twitter/WP themes floating around the web but I avoid them like the plague with all the malware and secret links built in to many of them. Keep up the great work. V.

  • Steve Iman says:

    Thanks for the tutorials. It’s a bit hard for me as an old guy to see the coding in the you-tube videos, and I couldn’t get the video display to work on your site, though the content was something I very much want to learn. On the page for Tut 3 there is an invitation to download source files, but that link takes one to Tutorial 2, where at least this old guy couldn’t find the files for download. Sure would appreciate them at sciman at csupomona dot edu.

Leave a Reply

What is 10 + 11 ?
Please leave these two fields as-is:
IMPORTANT! To be able to proceed, you need to solve the following simple math (so we know that you are a human) :-)
Start planning your project today. Get Started