Building Responsive Websites Using Twitter BootStrap

Syed Fazle Rahman

Before we start, there are a few things that you should know. This is a sequel to my previous article, Twitter Bootstrap Tutorial – Handling Complex Designs, which showcased many basics about building websites using Twitter Bootstrap from scratch. I highly recommend you read the previous article before jumping into the responsive nature of Twitter BootStrap. I am very thankful to our readers who praised my previous article and encouraged me to write the sequel to it. I hope you take away some useful knowledge from this article, too!

While the Release Candidate 1 of Twitter Bootstrap 3 is already out, we will be using version 2.3.2, which was their last most stable framework version. You can download the required files from their official GitHub page.

What do you mean by the “Responsiveness” of a website?

The first thing that comes to our mind when we use the word “Responsive” in the context of websites is that it should be compatible with all kinds and sizes of devices. There is a constant demand in the industry to make every website responsive for better readability of the online contents in different environments.

With the help of CSS3 and definitely HTML5, this trend is increasing every day. But what if you are a developer and not a designer? BONK!

Well, you don’t have to worry any more. Since, I have already stated in my previous article that Twitter Bootstrap is a superhero in the field of CSS Frameworks. This is definitely true when it comes to building responsive websites.

Setting up

To enable the responsive nature of Twitter Bootstrap, there are a few extra things you should follow, apart from what we did in our previous article. To set the responsive environment, you have to place the correct meta tag inside the head of the webpage.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

The above meta tag is quite self-explanatory in nature. We are setting the width of the page to the width of the device and initially scaling it to 1, i.e. default size.

Then we have to also use the correct CSS file from the BootStrap CSS files. Last time we had used only css/bootstrap.css but this time we will be using css/bootstrap-responsive.css also. So we are adding an extra responsive stylesheet to our webpage.

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">

Now we’re all set to start building our first responsive website using Twitter Bootstrap. Before we proceed, have a look at our demo page. Make sure you resize the browser window to see how your demo page is responding to various sizes of the browser. Awesome, isn’t it?

Learn Geometry

Let’s Begin

I have divided the above responsive webpage into different categories and we will see how to build each one of them in detail.

  1. The Responsive Navigation
  2. Marketing Area
  3. Contents Section
  4. Right side bar
  5. Footer

The above sections look pretty much the same as the ones we used in the previous non-responsive website. There are, in fact, minute but important changes in the markup to make it responsive. You will have to understand and use them very carefully.

The Responsive Navigation

Now, we’re going to build the navigation bar of the website. It will contain the website’s title and some right aligned menu link items. This is going to be fixed to the top of the website as you have seen in the demo page. So here’s the markup for this:

<div class="navbar navbar-fixed-top">
</div>

navbar class, already known to us, is for showing the navigation section. An additional navbar-fixed-top makes it stick to the top of the webpage. Pretty clear!

Let’s move ahead and insert some more codes into it:

<div class="navbar navbar-fixed-top">
	<div class="navbar-inner">
		<div class="container">
		</div>
	</div>
</div>

navbar-inner helps make BootStrap understand that you are going to place some stuff inside the navigation. container, as we have seen, is used to contain everything inside it as a wrapper.

Till now whatever we have added is just the basic structure of our navigation bar. Let’s see the real magical stuff that makes the navigation responsive.

<div class="navbar navbar-fixed-top">
	<div class="navbar-inner">
		<div class="container">
		<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
		<span class="icon-th-list"></span></a>
		<a href="#" class="brand">responsiveSite</a>
		<div class="nav-collapse collapse">
			<ul class="nav pull-right">
				<li class="active"><a href="#">Home</a></li>
				<li><a href="#">About Us</a></li>
				<li><a href="#">Contact Us</a></li>
			</ul>
			</div>
		</div>
	</div>
</div>

The branding and menu items are self-explanatory. It should be clear that adding the class brand gives the title a clean look and is used for the website’s name. The nav items are wrapped inside an additional div with the classes nav-collapse collapse which are used to make the menu appear like a stack when viewing in smaller browsers.

Just above the branding, you might be seeing an additional link with classes btn btn-navbar that wraps a span icon-th-list. This link is visible only on the smaller screens with a list icon. Also see we have used data-toggle=collapse that BootStrap uses to hide/unhide the menu items in smaller windows. data-target is used to identify which menus to hide/unhide.

Marketing Area

The marketing area is built in exactly the same as in non-responsive webpages. We will create a div with hero-unit class. Then place a container wrapper inside it and then add h1, p and link with btn btn-primary classes. The code should look like below:

<div class="hero-unit">
	<div class="container">
		<h1>Learn Geometry</h1>
		<p class="lead">Oat cake chocolate cake sugar plum sesame snaps. Bonbon danish oat cake chupa chups tart muffin tootsie roll sweet roll sweet roll.</p>
		<p><a href="#" class="btn btn-success btn-large">Get Started</a></p>
	</div>
</div>

Adding a class lead to the paragraph elements will make them stand out as compared to other p elements. Also make sure the hero-unit div is completely outside the navigation div.

Content Section

We had understood the concept of row classed elements in the non-responsive webpages. Here we will use a similar but slightly modified version of the row elements. This time we will use row-fluid inside of row class. This will enable the row of elements to fit to the webpage and flow down as and when needed. So the initial markup goes like this:

<div class="container">
	<div class="row-fluid">
		//some code here
	</div>
</div>

Now that we have our structure ready, let’s move and fill in some content. Before that we have to divide the whole area into two sections, one for the content and other for the right sidebar. To do that we will use classes like span* to divide the area.

We will use span8 and span4 for the content area and right sidebar. As stated in the previous article, Twitter Bootstrap is a 12-grid system. The sum of the amount of spans must total to 12. You can make as many divisions as you wish but the sum must total to 12. For example: span4, span4 and span4 (three columns) or span3, span7 and span2 (three unequal columns), etc.

So the final structure of our content area goes like this:

<div class="container">
	<div class="row-fluid">
		<div class="span8">
		</div>
		<div class="span4">
		</div>
	</div>
</div>

Here, span8 will be our content area and span4 will be our right sidebar. In the span8, we will add some random texts using p tags.

<p>Tart tiramisu ice cream cotton candy pudding. Sweet 
topping chocolate bar tootsie roll cotton candy brownie oat 
cake gummi bears. Danish cookie pudding powder. Pastry cotton 
candy tart topping. Dessert sesame snaps oat cake bear claw 
toffee jelly.</p>

<p class="lead">Marshmallow soufflé wypas.</p>

<p>Apple pie applicake sweet roll marzipan. Marzipan bear claw 
pudding jujubes sweet. Halvah sweet roll tiramisu liquorice 
candy canes halvah. Oat cake chocolate cake sugar plum sesame 
snaps. Bonbon danish oat cake chupa chups tart muffin tootsie 
roll sweet roll sweet roll. Sweet tootsie roll dragée cookie 
bear claw sweet roll jelly-o tootsie roll sweet.</p>

After all the p tags, we will again divide the span8 area into three equal columns to feature some sections of our website. We can nest as many row-fluid within a row-fluid, but the point to remember is the sum of span* divs should equal 12 else your design will break down.

Go ahead and place the following snippet just below all the above p tags but within span8:

<div class="row-fluid">
	<div class="span4">
		<h4>Our Clients</h4>
		<p>Hello These are our clients. <a href="#">Click here</a>.</p>
		<a href="#" class="btn btn-primary"><i class="icon-heart icon-white"></i> Our Clients</a>
	</div>
	<div class="span4">
		<h4>Our Clients</h4>
		<p>Hello These are our clients. <a href="#">Click here</a>.</p>
		<a href="#" class="btn btn-primary"><i class="icon-music icon-white"></i> Our Clients</a>
	</div>
	<div class="span4">
		<h4>Our Clients</h4>
		<p>Hello These are our clients. <a href="#">Click here</a>.</p>
		<a href="#" class="btn btn-primary"><i class="icon-file icon-white"></i> Our Clients</a>
	</div>
</div>

The icons in the buttons used here are shown from the glyphicons-halflings from the img folder. Use elements with appropriate icon class from the Bootstrap documentation to show the icon.

Right Sidebar

The right sidebar or span4 in our case will contain vertical navigation list. This section also remains the same as that used in non-responsive BootStrap webpage. We will also add an additional well class along with span4 to get a grey wrapper around the whole of right sidebar. Our code goes like this:

<div class="span4 well">
	<ul class="nav nav-list">
		<li class="nav-header">Our Services</li>
		<li class="active"><a href="#">Overview</a></li>
		<li><a href="#">Web Designing</a></li>
		<li><a href="#">Web Development</a></li>
		<li><a href="#">Android Applications</a></li>
		<li class="divider"></li>
		<li class="nav-header">Our Services</li>
		<li><a href="#">Overview</a></li>
		<li><a href="#">Web Designing</a></li>
		<li><a href="#">Web Development</a></li>
		<li><a href="#">Android Applications</a></li>
		<li class="divider"></li>
		<li><a href="#">Help</a></li>
	</ul>
</div>

Classes nav nav-list is used for vertical navigation list. A class divider is given to any li element to separate all the li elements present above and below with it with a horizontal thin line. nav-header is used to make the li element look like a sub section header.

Building the footer

Our footer here is going to be a simple container with three equal sized span* elements. As you can see in the demo page, the horizontal line above the footer is a <hr /> element.

So the code for footer goes here:

<div class="container">
	<div class="row-fluid">
		<div class="span4">
			<p>&copy; 2013 <a href="#">Zetiz Labs</a></p>
		</div>
		<div class="span4 text-center">
			<ul class="nav inline">
				<li><a href="#">About Us</a></li>
				<li><a href="#">Contact Us</a></li>
				<li><a href="#">Privacy Policy</a></li>
			</ul>
		</div>
		<div class="span4 text-right">
			<p>Powered By Twitter BootStrap 2.3.2</p>
		</div>
	</div>
</div>

text-center, text-right and text-left are aligning classes. You can use them as and when required.

Conclusion

You might not have realized it, but we have actually come to the end of the article. Congratulations on building your first responsive website. Try resizing the windows or opening the demo page in various other devices, to see the actual responsive nature.

Well, there is actually no end to what you can do with BootStrap. You can even customize it completely to make it look more personal. Custom stylesheets can be added, like “customstyle.css” or any other named CSS file. Import all the BootStrap CSS files using @import in “customstyle.css” and then link this CSS file in your webpage only. One change that I made in my customstyle.css was to override the background image and color of the marketing area.

Hope you had fun reading this article. Thank you!

Demo page

Comments on this article are closed. Have a question about Twitter Bootstrap? Why not ask it on our forums?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.onsman.com Ricky Onsman

    Comments are welcome

    • Bill Evans

      This has got to be the most straightforward and clear tutorial on website development I have ever taken. I am off to do the RWD followup immediately.

  • Rutherford

    Enjoying it thus far

  • Stuart McMartin

    This looks like old Twitter Bootstrap. 2.X.X.

    As such it is all out of date. Row-Fluid is gone. SpanX is gone.

  • Stuart McMartin

    Just noticed this bit “we will be using version 2.3.2, which was their last most stable framework version”. Still, I suggest there isn’t much point writing an introduction to a version of Bootstrap that will be history soon.

  • Keith Jones

    Another good tutorial, thank you.

  • Bill Evans

    the comment I left was meant to be for the first tutorial at
    http://www.sitepoint.com/twitter-bootstrap-tutorial-handling-complex-designs/
    which I now see has closed it commen
    sorry

  • Trever Pehrson

    Awesome starter walkthrough and explanation of Twitter BS

    • http://gadgeticworld.com/ Syed Fazle Rahman

      Glad that you liked it. :)

  • Leigh

    With the release of version 3 unfortunately this article is very out of date already.

    • http://gadgeticworld.com/ Syed Fazle Rahman

      Tutorial on Twitter Bootstap 3 will be published soon. Thanks for reading. :)

      • Annukka

        Really looking forward to the Bootstrap 3 tutorial as this one is so clear and easy to understand.

  • Bill Evans

    I am finding that the following line does not work

    until I change the quotation marks used to

    • sami

      ive done exactly how it is written there, even i tried to re-write all quotation sign but still the navigation bar isnt fixed yet :( may be inst working ….any suggestion pls?

  • Bill Evans

    when I copy and paste your code I have had to alter the quotation marks used when specifying the navbar-fixed top class to get it to work

  • jeff

    wow.. thanks for this and the previous tutorial. really helped me understand how to use bootstrap!

    • http://gadgeticworld.com/ Syed Fazle Rahman

      Thanks for liking it. :)

  • Adam brown

    Fantastic article thank you very much. As a developer design just gets takes up time, and then CSS plays it’s tricks too. Really hoping you do another tutorial soon about using JavaScript and jquery libraries with bootstrap. Thanks again

  • kukac7

    why not 3.0?

    • http://gadgeticworld.com/ Syed Fazle Rahman

      Since we had started with Twitter Bootstrap 2.3.2 so this was the sequel to the previous article. An extensive article on Twitter Bootstrap 3 will be published soon. :) Thanks for good response.

  • Eric

    Hi, trying to leave my email address in the box above for the free ebook, but as soon as I start typing, a script kicks in and redirects to a weird URL. Looks like some kind of coding error… !?

    • Saravanabava

      Nice for beginners…

  • Suncity

    Responsive Navigation doesn’t expand on Firefox!

  • pepebe

    Nice article. Regarding the Version 2 or 3 issue I want to mention, that most tools, expansions and additions out there will probably be working with version 2 for quite a long time and there will be lots of projects out there that will stay with version 2 forever. As it is not unusual that designer have to work with legacy sites, its good to find a place where you can get a quick overview about the dirty details.

    P.S The html of this page is seriously broken because of an unclosed href attribute near the end of the article. I suppose it’s the usual RTE Mess we have to cope with all the time. If you want people to submit to your freebies, you should fix that.

    • Ricky Onsman

      Fixed.

  • Jenil

    Readers can also also get free Bootstrap themes at http://www.bootswatch.com/2

  • Shaun

    In your last article, you gave some tips for customization. You mentioned that the Twitter Bootstrap CSS should be imported with @import. Why can’t we just link the Bootstrap CSS first and the custom CSS second? Why is an @import necessary?

  • AHShah

    Enjoyed the two articles as a quick tutorial for Bootstrap. Good style of writing and the right level of information!

  • Muharrem

    Thanks for the effort you spent.

    What about using or adopting this framework with ASP.NET web projects?
    Any guideline or applied sample?

    Muharrem

  • Marcus

    I must agree with a previous commenter, very straightforward and clear! Perfect level for me since I’m more of a back-end developer.

  • minesh

    Good for beginners only

  • Andy

    Greate job, it’s amazing! thanks

  • Umair Ulhaque

    I’ve never tried bootstrap before but I was curious to learn it. thanks for such tutorial.. recently I have completed my wordpress training so I’ve covered your tutorial step-by-step and finally I made a simple wordpress responsive theme :P

  • Simon

    Great information, thanks!
    I have a question though.
    While Bootstrap looks like easily the best way for someone like me to create a beautifully presented site, it’s clearly not a framework designed to help create more complex web apps.
    For my next project, I’m looking at using Symfony for the latter task, but would love to use bootsrap for the presentation.
    Would you recommend trying to merge the 2 before I start (I have seen some bundles for this), or completing all the app logic using Symfony and then somehow adding the presentation later.
    I am new to frameworks and so while I’m prepared for a learning curve, I want to try and minimise it :)

  • Hakier

    Good job. It was very nice to read and learn with your tutorial.

    Thanks a lot!

    You have one mistake few times. There is “navbar-fixed top”, but should be “navbar-fixed-top”.

    Regards

  • Kirti

    nice article. but i have one doubt, if we are developing responsive layout then there is no need to write media queries? or should we write media queries for smaller devices?

  • http://www.new2sms.com/ R Abishek

    What about the responsive js files, do we need to insert this file or not?

  • http://www.new2sms.com/ R Abishek

    Also media queries need to write or ?

  • Dhawal

    Very nice tutorial. Earlier I used to fear from bootstrap but this simple tutorial is really helpful to overcome bootstrap fear! :D
    Good Job & Thanks!