• Easy
  • 20 Minutes
  • 13 Comments
  • 4.2 / 5
  • December 29, 2013

Twitter Bootstrap Tutorial – Up and running with Twitter Bootstrap in 20 Minutes

twitter-bootstrap

This twitter bootstrap tutorial is designed to get you up and running with twitter bootstrap within 20 minutes. After this tutorial you should be able to create a basic responsive layout using twitter bootstrap. You should understand the grid system and be able to use the twitter bootstrap navigation, navigation bars and understand the basics of responsive design.

Tutorial Demo
UPDATE: New up-to-date bootstrap tutorial available here: A responsive design tutorial with Twitter Bootstrap 3

First thing to mention is that the twitter bootstrap documentation is excellent, it provides detailed examples of all the components it provides allowing you to easily copy and paste extras into your design. Their documentation can be found here.

BASIC HTML TEMPLATE

We need to start with a basic HTML template so we can include the required bootstrap files. Below is the start to our twitter bootstrap project, copy this code into a file and name it index.html.


<!DOCTYPE html>
<head>
<title>Twitter Bootstrap Tutorial - A responsive layout tutorial</title>
<style type='text/css'>
body {
background-color: #CCC;
}
</style>
</head>
<body>

</body>
</html>

We have added some CSS to make the background of the web page a light grey, this is so we can easily see the different columns within our design, making it easier to understand.

INCLUDE TWITTER BOOTSTRAP

To use twitter bootstrap there is only one file that we are required to include into our template, but there are many varieties available, please refer to the documentation if you wish to explore these options.

For the sake of this twitter bootstrap tutorial, we will include one file bootstrap-combined.min.css via CDN so we don’t even need to download any files. Place the following code on the line after the title tags:


<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">

This now makes all the twitter bootstrap CSS available within our template.

TWITTER BOOTSTRAP CONTAINER

The bootstrap .container class is very useful and creates a centered area within the page that our other site content can be put within. The .container class is the equivalent of creating a #frame DIV with a static width and setting its margin: to auto; to center it. The benefit of the twitter bootstrap .container is that as it is responsive and will work out the best width to use for the screens current width.

Within the body tags, create a division element with a class of container. This will act as the pages main wrapper where we will place all our other HTML code.

If you were to set a height and a background colour of white to this division element, it would look as follows:

Twitter Bootstrap Tutorial, Section 1

HEADER & NAVIGATION

Now we have a place to add our additional HTML code, we can add the heading text and then create the sites main navigation bar. Add the following text, or text of your choosing within the .container division element.


<h1>TWITTER BOOTSTRAP TUTORIAL</h1>

Nothing new here, just a heading, lets swiftly move on to something more interesting, the twitter bootstrap navigation.

Bootstrap has a .nav class that allows us to create all kinds of navigation elements, place the following code after the h1 tags.


    <div class='navbar navbar-inverse'>
      <div class='navbar-inner nav-collapse' style="height: auto;">
        <ul class="nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Page One</a></li>
          <li><a href="#">Page Two</a></li>
        </ul>
      </div>
    </div>

The .navbar class holds all the styles for the navigation bar, then adding the .navbar-inverse class will apply the super cool black style that is so common with twitter bootstrap. I recommend expanding on these styles and creating something really unique, but for this bootstrap tutorial we will be sticking to the basic bootstrap styles.

Within the .navbar division, we add another division element with the class .nav-collapse and some inline CSS of height: auto;. This is telling bootstrap that when the page is viewed within a browser, that has a window size of less that 979px it will provide a compressed alternative view.

If you save the index.html file and preview it in a browser you will be able to see this response on re-sizing the browser window, as illustrated below:

GREATER THAN 979 PIXELS

Twitter Bootstrap Tutorial, Section 2

LESS THAN 979 PIXELS

Twitter Bootstrap Tutorial, Section 3

Additionally, we add a .nav class to the un-ordered list HTML element to apply more style from the bootstrap CSS and also add a .active class to the “Home” list element.

MAIN CONTENT & SIDEBAR

We have the main navigation of the site complete, now we need to add the main content area and a sidebar to hold more links / navigation routes. Add the following code directly after the navbar code:


<div id='content' class='row-fluid'>
      <div class='span9 main'>
        <h2>Main Content Section</h2>
      </div>
      <div class='span3 sidebar'>
        <h2>Sidebar</h2>
      </div>
</div>

This is where we need to understand the twitter bootstrap grid system, of course the bootstrap documentation covers it in detail here, but we will now cover the basics to get you started.

The grid system utilizes a 12 column layout, meaning that the page can be divided by 12 equal columns if you so desire. The following image from the bootstrap documentation provides a good visual representation.

Twitter Bootstrap Tutorial, Section 4

In the code that we just pasted under the navbar you can see classes span9 and span3. This will divide the page into 9 columns width on the left and then 3 columns width on the right, making our content area and sidebar. A benefit to using this grid system is that it works out the width of each of these columns relative to the screen size, so you don’t have to worry about writing any extra media queries to get the site working on all screen resolutions.

Experiment with this code by changing the span number and then try re-sizing the browser to see the effect. You will notice that after the .container become 724px wide, the columns will stack vertically.

Quickly throw the following text, or any text into the main content area directly after the h2 tags, just to pad out the site a little.


  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.<p> 

  <p>Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>

You show now have something that looks like this:

Twitter Bootstrap Tutorial, Section 5

SIDEBAR NAVIGATION

Twitter bootstrap has a set of navigation elements available for use, you can see them all here.

We are going to use the stacked tabs to create an additional navigation pane. Copy and paste the following code after the sidebar h2 tags.


  <ul class="nav nav-tabs nav-stacked">
    <li><a href='#'>Another Link 1</a></li>
    <li><a href='#'>Another Link 2</a></li>
    <li><a href='#'>Another Link 3</a></li>
  </ul>

And it is as simple as that! The above code is literally just an un-ordered list with the two classes nav-tabs and nav-stacked which creates the navigation pane for us.

Take a look at the final, twitter bootstrap responsive design.

Twitter Bootstrap Tutorial, Section 6

CONCLUSION

This twitter bootstrap tutorial was a very quick blast through some of the features that twitter bootstrap can offer, over time and practice along with reading the official documentation it won’t be long before you are a bootstrap wiz.

After reading this bootstrap tutorial you should understand how to use the grid system, the different types of navigation available and the basic fundamentals of responsive design.

If you have any questions or feedback please leave me a message in the comments box below. Thank you for reading.