Twitter Bootstrap Tutorial – Handling Complex Designs

Syed Fazle Rahman

Much has been said and written about Twitter Bootstrap these days in the world of web designing and development. Some people call it a boon for web developers with zero designing knowledge, while others call it a blessing for the designers. Whatever it may be, it does things easier and faster.

Bootstrap

In many scenarios web developers have the entire setup ready with them but they can’t proceed due to absence of the design of the project they are going to work on. They have to rely on the designers to complete the client side of their project. This process consumes a hell lot of time and is a serious wastage of time for a developer who needs his/her ideas to be implementing as quickly as possible. In such scenarios, Twitter Bootstrap comes to the rescue in the super-heroic fashion!

Twitter Bootstrap is a CSS framework that helps in designing web applications. It is one of the easiest CSS frameworks to use in the Industry today. It assumes you have no designing knowledge and all you want to do is write some HTML as per the Bootstrap specifications. In short, Twitter Bootstrap has already written a CSS style sheet for you, has inbuilt jQuery support and also has some popular JavaScript tools. Wooh! Isn’t that great? You get a bunch of popular tools ready to use. All you have to do is just place the right HTML mark-up at correct place.

In this tutorial, I will explain how you can start using Twitter Bootstrap by showcasing a demo layout page, and how you can explore the framework and customize it for your own requirements.

Getting Started

To start using Twitter Bootstrap, you have to download bootstrap.zip from their official github page. It contains a set of files, namely css, js and img that we need to start building websites with Twitter Bootstrap. The “css” folder has style sheet for both non-responsive and responsive designs and also their minimized versions. You will use the minimized version for making the site faster when the design has been finalized and the project is ready for the launch. The “js” folder has bootstrap.js and its minimized version. These JavaScript files contain various JavaScript components that we will use in our website designs. The last folder, “img” contains two set of Halflings images, both are exactly the same except for their foreground color. The halflings images are supplied by glyphicons who were very generous enough to provide the images for free in the Twitter Bootstrap project.

So let us get our hands dirty. Before we start, open your text editor and create the first file named “index.html” and save it in the home folder of your project.

sitepoint1

Basic HTML Template for Bootstrap to work

In order to activate the Bootstrap framework, you need to include all the appropriate files and follow a proper HTML structure. Here, we will build the structure first and then see which files are required. The first thing that you should note is that it requires an HTML5 doctype declaration at the top:

<!DOCTYPE html>

We will set the meta character to utf-8 because we will be using special characters in our project and we want the browser to parse them correctly. Twitter Bootstrap also specifies the use of utf-8 in their documentations for better compatibility.

<meta charset=”utf-8”> 

Then we will set normal html tags like <html>, <head> and <body> which are basic tags of html. Your index.html page should look as below.

index page

We will now proceed to include the necessary style sheet which is bootstrap.css.

<link rel=”stylesheet” href=”css/bootstrap.css”  type=”text/css”/>

Now that we have our CSS ready, we will include all the required JavaScript files. Firstly, you need to include a jQuery file, for this I will suggest including from the jQuery CDN, as below.

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

Then we will include the Bootstrap file.

            <script src=”js/bootstrap.js”></script>

All these scripts should lie just above the end body tag </body>, in consideration of the performance of your web page.

Finally, we are done with the process of including all the necessary files. You are now set to start building the various components of your website. Your index.html should look like this.

final index file

Understanding how it works

Firstly, we need to understand that Twitter Bootstrap is largely dependent on 12 grids. So, what are grids?

Suppose you want two large equal divisions inside the body of your index.html. You have to give a class of “span6” to each of div element. This tells Bootstrap to make two equal divisions that should span six grids on each side.  Hopefully, this gives you an idea of how Bootstrap works. It has a set of predefined classes for each element. You have to give appropriate classes to each when needed.

To better understand what we are going to build today, here’s the first demo page. Have a look and come back. We will start building it.

Coding with Bootstrap

Let us divide the demo page into five major parts:

  1. The header
  2. The marketing area
  3. The leftside bar
  4. The contents area
  5. The footer

sitepoint5

To wrap everything contained in our website, we will create a container class that should be centered to the middle of the screen and also have a decent amount of padding on all sides. For this, Bootstrap has a class called “container”, which we will use as our parent wrapper. So go ahead and write the following piece of code:

<div class="”container”">

Now inside the container div, first we will jot down the title of the website. For this we will use, h1 heading tag.

<h1><a href="”#”">Bootstrap Site</a></h1>

Check your index.html in the browser, it will be centered beautifully. It’s time for the navigation bar. Twitter Bootstrap specifies following markup for the navigation bar:

<div class="navbar">
	          <div class="navbar-inner">
	            <div class="container">
	              <ul class="nav">
	                <li class="active"><a href="#">Home</a></li>
	                <li><a href="#">Projects</a></li>
	                <li><a href="#">Services</a></li>
	                <li><a href="#">Downloads</a></li>
	                <li><a href="#">About</a></li>
	                <li><a href="#">Contact</a></li>
	              </ul>
	            </div>
	          </div>
	        </div>

“navbar” should be the class given to the main div of the navigation. You have to follow the above markup for the navigation to appear as per Twitter Bootstrap style. Place the above code just below the h1 tag. Make sure you are placing everything inside our parent wrapper class, i.e. “container”.  Go to the browser and check your page, you will see a beautiful navigation bar just below the site title.

navbar

Obviously, you would want your header to look a bit different to this. At the end of this tutorial, we will look at how we can add our own styles to the existing Bootstrap styles and add a bit more CSS to design the header area. Let’s move on to make the second part, which we’ve called “The marketing area”.

There is a beautiful predefined class supplied by Twitter Bootstrap for a marketing area. They have given it a class of “hero-unit”. Go ahead and copy the code given below and paste it below the navigation div.

    <div class="hero-unit">
        <h1>Marketing stuff!</h1>

        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>

        <a href="#" class="btn btn-large btn-success">Get Started</a>
     </div>

Check your page in the browser; it should now look like below:

marketing area

Isn’t that amazing? Without writing a single piece of CSS, you have such a beautiful marketing area. OK, let’s explore the above code. The “hero-unit” has a CSS designed for an h1 tag. So anything you write in an h1 heading will look bold and stand out from rest of the body elements. Next we have general <p> paragraph tag to describe our marketing or our product.

Here comes the interesting part, the links and buttons. You can make any link look like a button by adding a class “btn” and then vary its size by adding some more additional classes like btn-large/btn-small/btn-mini. To change the colors of the buttons, add classes like btn-success (green), btn-info (light blue), btn-warning (yellow) and btn-danger (red). More about buttons and decorating links can be found in the Twitter Bootstrap’s Base CSS section. These classes are applicable to the HTML button element.

I hope so far your journey has been interesting. Twitter Bootstrap is so easy that it doesn’t let you do anything inside CSS stylesheets. You have to just use the resources it provides. This is what makes it one of the most powerful CSS frameworks in the industry.

We will now proceed to the next sections, the left side bar and the contents section. You will understand how I was able to divide the area into two unequal vertical areas and how can we do more such divisions. As stated earlier, Twitter Bootstrap is a 12 grid system. You have to remember this, always. This means you can make at most 12 vertical grids inside any parent grid.

Currently we are working inside our parent wrapper class “container”. So we will divide the section into two unequal parts using the 12 grids. For the left side bar, we will use the class “span4” and for the rightside content section we will use “span8”. The class names reflect my intention that the left side should span to four grids and the right side should span across remaining the eight grids.

       <div class="row">
	        	<div class="span4">
	        		<p>Dummy Text</p>
	        	</div>
	        	<div class="span8">
	        		<p>Dummy Text</p>
	        	</div>
	        </div>

Your webpage should now appear as below.

sitepoint7

There should be two separate columns standing side by side. You must be now thinking about the extra wrapper div that I have added above with class “row”. Well, the reason is span* classes are by default floated left. To force both columns to be present below all the contents above we have added the “row” div. It acts like the traditional “<tr>” row of tables. Now you should delete the dummy paragraph elements from your code. We will now fill the left column with navigation list.

For the navigation list you have to follow the following markup.

<ul class="nav nav-list">
    <li class="nav-header">What we are?</li>
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Our Clients</a></li>
    <li><a href="#">Our Services</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact Us</a></li>
    <li class="nav-header">Our Friend</li>
    <li><a href="#">Google</a></li>
    <li><a href="#">Yahoo!</a></li>
    <li><a href="#">Bing</a></li>
    <li><a href="#">Microsoft</a></li>
    <li><a href="#">Gadgetic World</a></li>
</ul>

You have to add “nav-list” class in addition to “nav” class which will make it look like a list. Adding class “nav-header” to any “li” element of “nav” class will make it look like a heading to the section of links. Go ahead and see how it looks in the browser.

sitepoint8

Moving to the content area, we will be just filling it up with general h3 tags and paragraph tags. No extra classes are needed as we want them to appear one below the other. Below is the code that I will be placing inside “span8”.

<h3>How we started ?</h3>

<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>

<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>

<h3>How do we market?</h3>

<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>

<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>

Refresh your browser and it should now look like below:

sitepoint9

As you can see, we are very close to achieving our final design. We are just left with the footer portion.

For the footer, we will again divide the “row” into three parts as you can see in the demo page. This time the division will be in equal portions, which is “span4”. So we will create another “row” div just below the “row” div of the above left sidebar and content area. Follow the code below:

<div class="row">
<div class="span4">
		<h4 class="muted text-center">Meet Our Clients</h4>
		<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
		<a href="#" class="btn"><i class="icon-user"></i> Our Clients</a>
	</div>
	<div class="span4">
		<h4 class="muted text-center">Know Our Employees</h4>
		<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
		<a href="#" class="btn btn-success"><i class="icon-star icon-white"></i> Our Employees</a>
	</div>
	<div class="span4">
		<h4 class="muted text-center">Reach Us</h4>
		<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
		<a href="#" class="btn btn-info">Contact Us</a>
	</div>
</div>

Simple enough! We have divided the row into three equal parts using “span4” class and then filled each one of them using h4 tags, paragraph tags and links that look like buttons. Check the output in your browser. You should be seeing little images inside the link buttons, Our Clients and Our Employees. You have to take help of <i> tag and add appropriate image classes like icon-user, icon-star, icon-glass etc. To change the icon to white, use class icon-white along with icon-user and icon-star classes. A full list of icon classes can be found in the Bootstrap’s documentation here.

To give a little spacing between the footer area and the above content, we will add a <hr> tag between each “row” div. Go ahead insert <hr> tag and compare it with the demo page.

Now for the copyright area, we will add the following code:

<hr>
<div class="footer">
<p>&copy; 2013</p>
</div>

So finally, we have built a simple yet decent landing page using purely the Twitter Bootstrap framework.

Adding Custom Styles to Twitter Bootstrap

If you have a little knowledge of CSS and you want to tweak Bootstrap’s default styles, then the best way is to build your own custom style sheet, import Bootstrap’s Style sheets at the top and then override the styles in your own CSS file. Make sure to link to your custom style sheet and not to the Bootstrap’s CSS files. If you are happy with Twitter Bootstrap’s default style then obviously you don’t have to create a custom style sheet. But as many websites will use this framework, it will become a common style which can be seen in every other websites built with Bootstrap. So it is better if you add your own flavor of CSS on top of the Bootstrap’s CSS.

@import url("bootstrap.min.css");

Some more Important Components of Twitter Bootstrap

Lead Paragraphs

To make a paragraph stand out in the middle of long document, you can add class “lead” to it. It will make the fonts of that particular paragraph a bit bigger than the rest of the document.

Emphasis Tags

You can also use the default Emphasis tags like <small>, <strong> and <em> inside your html page. Tags like <b> and <i> are still valid.

Text aligning

Text aligning inside any paragraph or a div tag can be done using the classes: “text-left”, “text-center” and “text-right”.

Text colors

You can set the default color for paragraph text by using various text color emphasis classes like “muted” for grey, “text-warning” for red, “text-error” for deep maroon, “text-info” for light blue and “text-success” for green color.

Styling Tables

Twitter Bootstrap also designs the default tables. Follow the following markup:

<table class="table">
 	<tr>
		<td></td>
		<td></td>
</tr>
…..
</table>

Playing with images

You can add images using the normal <img src=”demo.jpg”/> tag. To make your designs a bit more interesting, add classes like “img-rounded” for rounded corners, “img-circle” for circling the image and “img-polaroid” to give box-shadow and border radius to the image.

Drop down menu

To add a drop down menu to the existing navigation bar as shown in the demo page, you have to add the following markup inside a “li” element.

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
        <i class="icon-th-large"></i> Drop Down
        <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
        <li><a href="#">Item1</a></li>
        <li><a href="#">Item2</a></li>
        <li><a href="#">Item3</a></li>
    </ul>
</li>

For a dropdown, you have to wrap the parent element using the “dropdown” class and then use the default “a” markup for the caret and then nest another ul element with the items.

I have shown you the basics of using Twitter Bootstrap and how can you get started with it. Now that you have understood how it works, I hope it will be easier for you to understand their original documentations. Go through it and you will definitely find a lots of new features as you explore.

In my next tutorial, I will aim at building responsive websites using Twitter Bootstrap. So stay in touch with us and subscribe to our newsletter if you don’t want to miss my next tutorial, which will be twice as exciting this one.

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

Start building websites with Bootstrap today! Learnable memberships come with access to dozens of SitePoint books, including Jump Start Bootstrap.

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.internetbuff.co.uk Simon Jennings

    Good tutorial to get people started with Bootstrap. But what makes Bootstrap better than the many other available frameworks? Is it really easier than the alternatives?

    • http://www.extremecss.com/ Syed Fazle Rahman

      Thanks for appreciating.. :) There are several ways in which Twitter Bootstrap helps web developers:
      1) Cross browser compatibility.
      2) Power to built responsive designs (which is also the topic of my next article).
      3) Saves 50% of the development time. (My own personal experience).
      4) Has great documentations.

      Yes, Twitter Bootstrap is the easiest according to me. You just have to play with correct html markups. :)

  • http://www.markhallam.net Mark Hallam

    What I don’t understand is how to create colored background boxes around text and images with padding on the inside? If you could clarify this, I would really appreciate it.

    • http://www.markhallam.net Mark Hallam

      I mean columns.

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

        Of course you can do those things. As I have mentioned in the article with the use of custom css, you can add your own personal touch to any class/element.

        In addition to the Twitter Bootstrap classes, you can even add your own classes like class=”container homepagecontainer”. Here the “container” is the class by Twitter Bootstrap and “homepagecontainer” is your own class. Later you can use this “homepagecontainer” class to add your own CSS like changing background and adding extra padding.

        Hope this clarifies your doubt. :)

  • http://goo.gl/7miiP Ryan

    Twitter bootstraps ois really making responsive web design much easier.

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

      Yes, it shortens the designing time to a great extent. Another article on “Responsive Twitter Bootstrap” is coming soon. Do keep a track of SitePoint articles.

  • http://ourkios.com iman

    OMG..this is what I need, i found about “Bootstrap Tutorial” for my website, thx

  • http://www.pixelangry.it pixelangry

    Thank’s for the tutorial.. :)

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

      Welcome! :)

  • http://www.bluzog.com sashwat sharma

    Great tutorial ! What i was exactly looking for :)

    Thanks to sitepoint ! you guys are doing well ! Keep the good work ahead !!

    • http://www.extremecss.com/ Syed Fazle Rahman

      Thanks for appreciating. :)

  • Joseph Myalla

    Really sweet and great tutorial, eagerly waiting for the next

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

      Thanks Joseph! :) :)

  • Juan José Correa

    Muchas gracias. Es un tutorial simple pero muy eficiente. Felicitaciones.

  • SJ

    Can you please elaborate on the use of row vs row-fluid?

    Thank you

  • Bharat Ruparel

    Nice write up Syed. How about covering the Javascript part of Bootstrap in detail?

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

      Yes. I have planned to explain more about JavaScript in Twitter Bootstap in my next article.

  • Jenny Arnez

    Excellent tutorial! Thank you!

  • Walter

    Great Tutorial, Will a more detailed course be on Learnable one day? Perhaps a beginner, moderate, and advanced course for bootstrap. That would be a great addition!

  • Vivek

    Hi Syed,
    Thanks for building this tutorial.
    As I was going through it I came across 2 things missing in the code snippet for the content contained in the div with a class of hero-unit
    a) tag is missing
    b) class=”btn btn-large btn-success” missing on <a> tag

    Looking forward to your next tutorial of building responsive websites :)

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

      Thanks for pointing it out. It has been fixed now! :)

  • http://www.autopten.com/ JohnMc

    Just last night I met Bootstrap looking for info about responsive design and today I got this excellent tutorial through the SitePoint newsletter. Thanks Syed. I can’t wait to see the next one about responsive.

    So far, I have only one question.

    I’m not sure if it is only happening to me, but when I load your demo site, and the one hosted in my server, it takes like 4-5 seconds to links and buttons start working as links with the hover effects included.

    If somebody else has noticed this delay, thanks for sharing it.

  • http://www.my2usoft.com Hijas

    Twitter Bootstrap good for developers…..
    Useful post thanks.

  • http://SMSall Martin

    Great post! Thanks.

  • Andrew

    What a brilliant tutorial! Can’t wait for the responsive design one. Thanks!

  • http://www.manojmadhavan.com Manoj Madhavan

    Great

  • a.r.RAZU

    I have started learning through this tutorial .
    It is really a clean and nice tutorial.
    Thanks Syed for your nice tutorial.

  • vartika

    waiting for the responsive css.
    thanks to you i have good head start

  • http://yourpocketpa.com Scott

    Thanks for the tutorial! Looking forward to reading the next part! Just one minor niggle though – some of the some of quotes in the code examples are ” rather than “. A minor point I know, but I added the code to show the dropdown menu and couldn’t get it to work as the script tag for the boostrap.js had the wrong quotes around it … but like I said your tutorial is great jumping off point for using and discovering bootstrap. Thanks!

  • shubham

    One of the best Twitter Boot strap Tutorial on web
    Thanks to author

  • Ben Russell

    Great introduction to Twitter Bootstrap.

    Just a note though – Bootstrap RC3 is now downloadable, but won’t function correctly with this tutorial. Be sure to download V2.3.2 http://getbootstrap.com/2.3.2/
    RC3 appears to change some of the class names ie. hero-unit no longer exists, and has been renamed to jumbotron (don’t ask me why! lol ). There are others too which have been either renamed or removed.

    Best bet is run through this tutorial, using V2.3.2, and then try converting it to Bootstrap RC3, and then add in some custom styling.

    Overall though an easy to follow, useful tutorial into how to use Bootstrap.

  • Tokula

    The best tutorial on Bootstrap on the web…hurrrrry up with the next

  • Sue

    Thank you for such a comprehensive article! Would you be able to create a revised version, now that Bootstrap 3.0.0 is out?

    Thanks again and looking forward to reading your future articles!

    Best wishes, Sue.

  • Sudhir

    hello Sir
    i hv prob to create column in row div……..
    main prob is tat if i make row dive thn make column div but all div in row but i define in column

  • http://www.addbuya.com Shanmugam

    This tutorial is good for beginners who willing to learn twitter bootstrap without design knowledge. Thanks for the nice tutorial.

    FYI, But I found there is a typo for “poplar” instead of popular.

  • http://wallbb.co.uk/ Wallbb

    Wow, now this is going to be real fun. Specially when designing projects fast :)

  • Syeed Chy

    In my pc, the menu bar is shown vertically instead of horizontally? What’s the reason?

    Thanks in advance.

    • John

      This is happening for me too. I even copy and pasted the code.

  • anand

    hi Fazle,
    I am planning to lunch a site in this month. I want it to go mobile. Which framework to you suggest?

  • anand

    hi, there are typing error class=””container””……quotes are typed twice.

  • Rini

    As a developer and a little knowledge in designing i was struggling with all the css ans js provide by
    the bootstrap and this article provide a light to start designing
    Good Start

  • http://www.bootstraptheme.net/ Jack Mathers

    As someone who has heard a lot about bootstrap but still isn’t quite clear on all the little details, I definitely appreciate this post. Straightforward, simple to follow, and comprehensible. Looking forward to seeing your next tutorials!

  • Deborah

    Awesome tutorial!
    Thank you very much!

  • http://www.netwebbing.com Helena

    Hi Syed, thank you for a great tutotrial. I have only just come across Twitter Bootstrap and had no idea how to use it. Your great and clear tut has given me another little step into the amazing world of TBootstrap! Thanks so much!

  • Hoskiss

    Thanks so much for this great tutorial

  • ajay kumar

    so great tutorial!!!!

  • Vengatesh TR

    Great tutorial. Thanks :)