Understanding Twitter Bootstrap 3

Syed Fazle Rahman
Tweet

Version 3 of Twitter Bootstrap is a major change from all its past versions. It is a mobile-first framework and can claim to be one of the best CSS frameworks for building responsive website designs.

In my last article I focused on building responsive websites using Twitter Bootstrap 2. From that, you should have an idea of how Bootstrap works.

Since Twitter Bootstrap 3 is a mobile-first framework, by default whatever you design or create will be mobile compatible or responsive. Isn’t that cool?

Getting Started

Twitter Bootstrap has a new website design which is itself built using the Bootstrap 3 framework.

Bootstrap title

You can download the archive file here. Once you unzip the archive file, you will see lots of files and folders that are not required for our tutorial. Jump directly into the dist directory and copy all the folders to a new destination, which will be your project home.

Bootstrap folders

Now, we have three directories, so let’s look at each of them. The css folder contains four CSS files: bootstrap.css, bootstrap.min.css, bootstrap-theme.css and bootstrap-theme.min.css.

Our main CSS file is bootstrap.css, and we must include that in all our HTML pages. bootstrap.min.css is just the minified version of bootstrap.css. It is needed when we are actually deploying our application online. Bootstrap-theme.css is the additional CSS file, which is optional for you to use. It gives 3D effects on the buttons and some other elements. Similarly, bootstrap-theme.min.css is the minified CSS file of bootstrap-theme.css.

The biggest difference between Bootstrap 2 and Bootstrap 3 is the use of font files instead of flat images to showcase various image icons. This has a couple of advantages.

  • Consumes less bandwidth, speeds up the website
  • The font icons are responsive and resizable

These font icons are called Glyphicons, named after the company that gave those icons for free to Twitter Bootstrap.

Moving on to the js folder, we have two files named bootstrap.js and bootstrap.min.js. These files contains bootstrap’s main JavaScript libraries for things like carousels, drop down menus, search auto suggest and many other powerful JavaScript functionalities. We will use the minified version when the application is ready for deployment.

So what exactly we are going to build?

In this article, we are going to build a static landing page using Twitter Bootstrap 3, which will be called “Rental Vacations”. Have a look at the demo page first.

demo project page

Resize your browser window and you’ll see some amazing transformations in the layout of the webpage. It adjusts to the size of the window. You will also notice that the menu bar is hiding automatically into a nice touch-compatible menu.

So we are going to build this! Excited? Yeah … me, too!

The structure

Bootstrap 3 understands HTML5 elements, so we need to add appropriate an doctype tag onto our webpage. Let’s go ahead and create a new HTML page. After that, add the following doctype tag.

<!DOCTYPE html>

Now we will add the basic tags that are present in every HTML document.

<html>
  <head>
	<title>Bootstrap 101 Template</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- Bootstrap -->
	<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
 
  <body>
	<h1>Hello, world!</h1>
 
 	<script src="//code.jquery.com/jquery.js"></script>
  	<script src="js/bootstrap.min.js"></script>
  </body>
</html>

Looking inside the <head>, we have the title tag which is pretty basic to understand. It gives a title to the page.

Then we have the meta tag, which is very important to understand when using Twitter Bootstrap 3. Since this version of Bootstrap is built to be compatible with various types of devices (mobiles, tablets, desktops, retina displays, etc), you need to let the browser know that it has to scale your webpage appropriately on every device.

The viewport meta tag does this. Here, we have set the initial content-width to the width of the device and scaled it one time only.

After setting the viewport meta tag, we have imported the document version of Twitter Bootstrap 3 CSS file, bootstrap.css. This file is completely self-explanatory. It has commented description just above each tag style. If you ever want to know what any class in Bootstrap does, just open your bootstrap.css file, find the respective tag and read the documented comment above it.

Let’s move on to the body tag of the above HTML snippet. Just for the sake of output we have written “Hello, world” inside the h1 tag. Then we have included the required JavaScript files from the js folder. Make sure that these JavaScript files are included on every page that you use. Twitter Bootstrap 3 documentations recommend including all the JavaScript at the end of the page.

Diving Into Twitter Bootstrap 3

Now that we have our basic structure ready, we will move on to adding different components into our webpage. These components are by far the most important part of every website that we see every day. I am going to divide the webpage shown in the demo page into various parts as shown below.

page sections

Menu Section

Designing a menu in Twitter Bootstrap 3 is the easiest thing that can happen in the world of web designing. It is that easy. Let’s start building a menu for our webpage.

We need correct markup here too. A major difference in Twitter Bootstrap 3 from its predecessor is that the menu is by default responsive and gets a new look in smaller devices. Since we have the entire CSS ready in our bootstrap.css file, we just have to add the correct markup and correct classes to each element.

Go inside the body tag of your HTML file and add the following markup first.

<nav class="navbar-wrapper navbar-default navbar-fixed-top" role="navigation">
</nav>

Since, Bootstrap is HTML 5 compatible, we will be using the <nav> tag for our navigation menu. Let’s understand each class applied to it. navbar-wrapper class, as the name suggests, is the wrapper to the menu items. navbar-default gives the background color to the menu and also applies a border to it. navbar-fixed-top helps to make the menu bar fixed at the top of the page even if we are scrolling. If you don’t want a fixed top menu, then you can remove that class.

Moving on, add the following snippet inside the <nav> element.

<nav class="navbar-wrapper navbar-default navbar-fixed-top" role="navigation">
      	<div class="container">
      	  <div class="navbar-header">
            <a class="navbar-brand" href="#">Vacation Rentals</a>
      	  </div>
        </div>

The container div makes sure that your content is aligned, with a decent margin from each side of the webpage and is also centered on the browser screen. The navbar-header div is used for branding purposes. I have added a link with the class navbar-brand to display the name of the website.

Now add the following code outside the navbar-header div.

<div class="collapse navbar-collapse navbar-ex1-collapse">
	<div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
              <li><a href="#"><span class="glyphicon glyphicon-star"></span> Top Destinations</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span> About Us<b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Company Details</a></li>
                  <li><a href="#">Contact Us</a></li>
                </ul>
              </li>
            </ul>
            <form class="navbar-form navbar-right" role="search">
              <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
              </div>
              <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#"><span class="glyphicon glyphicon-asterisk"></span> Book Tickets</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-info-sign"></span> Reservation<b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Cancel</a></li>
                  <li><a href="#">Confirm</a></li>
                </ul>
              </li>
            </ul>
          </div><!-- /.navbar-collapse →

The above code is the main content of our menu. navbar-collapse is applied to make the menu touch-compatible and also to change its form for smaller devices. The contents inside are pretty easy to understand. We have used basic ul and li tags for listing menu items. There’s also a form that is classed navbar-right for pulling it to the right of the navigation bar. And finally I have shown the basic structure to place a drop down menu inside the navigation.

The most important thing here is to remember the classes used for displaying particular kinds of elements in Twitter Bootstrap. You can also refer to their documentation, which is highly recommended whenever you are in any kind of confusion.

So we are finally done with the navigation menu. Let’s move on to building the rest of the body parts.

Header Area

Bootstrap 3 gives a highly usable class called jumbotron that can be used to display large headers and contents. This is mostly used in product selling websites. For that, we need to add the following markup.

        	<div class="container-fluid">
        <div class="jumbotron">
            <h1>Best Vacation Rentals</h1>
            <p>Sed placerat fringilla quam et.</p>
            <a class="btn btn-primary btn-lg">Start Now!</a>
        </div>
     	</div>

The basic difference between container class and container-fluid class is that the former is centered to the body of the browser with some decent width, while the latter one is set to 100% width of the browser.

Then we have the jumbotron div element and inside it we have placed a h1 tag, a p tag and finally a fancy button. Refresh your browser and see the header area. Awesome!

The Contents area

Now we have a challenge. We need to divide the content area into three equal areas and place them at the side of each other. This is called the Bootstrap 3 grid system.

You may have heard that Twitter Bootstrap is a 12 grid system. That is indeed 100% true. It divides the screen into 12 equal parts and we need to specify which HTML element occupies which parts of the grid. So in short any element will occupy a minimum of one grid in the grid system.

Let’s see the markup first.

<div class="container">
          <div class="row">
            <div class="col-md-4">
              <a href="#"><img class="img-responsive img-circle" src="images/feat1.jpg"></a>
              <h3 class="text-center">Type 1</h3>
              <p>Dummy Text..</p>
              <a href="#" class="btn btn-success">Book Now @ $599</a>
            </div>

            <div class="col-md-4">
              <a href="#"><img class="img-responsive img-circle" src="images/feat2.jpg"></a>
              <h3 class="text-center">Type 2</h3>
              <p>Dummy Text..</p>
              <a href="#" class="btn btn-danger">Book Now @ $899</a>
            </div>

            <div class="col-md-4">
              <a href="#"><img class="img-responsive img-circle" src="images/feat3.jpg"></a>
              <h3 class="text-center">Type 3</h3>
              <p>Dummy Text ...</p>
              <a href="#" class="btn btn-info">Book Now @ $699</a>
            </div>
          </div>
        </div>

Firstly, I am using container here instead of container-fluid. Then I have defined a row of siblings. In our case, there are three div elements that are contained inside a single row. So we start a new row by adding a new div with class row.

The row now has three more div tags with the class col-md-4. The number 4 in the class tells us that it occupies four grids. So three sibling divs with four grids each will occupy 12 grids, which is perfectly fine.

Make sure you are not specifying more than 12 grids in a single row else your design will break down. Next, the col-md-* tells us that in the medium screened devices (≥992px), the siblings will be placed side to each other while in smaller devices they’ll stack on top of one another.

We also have classes for small screen (col-sm-*) and extra small screen (col-xs-*). I hope you have now basic understanding of Twitter Bootstrap’s grid system.

Since we have each sibling div placed appropriately, it is now time to populate them with some content. In our case, the content is unique for each one of them, with different images.

<div class="col-md-4">
              <a href="#"><img class="img-responsive img-circle" src="images/feat1.jpg"></a>
              <h3 class="text-center">Type 1</h3>
              <p>Dummy Text ...</p>
              <a href="#" class="btn btn-success">Book Now @ $599</a>
            </div>

The image added has class img-responsive that makes it fit to the size of the parent div irrespective of its own size. The image is responsive to the size of each sibling div. Then we have a normal h3 tag and p tags. You can populate the p tag in any manner you wish. In my demo page I have used the auto generated Lorem Ipsum text. Then finally, I have added a link that looks like a button. With the class btn you can give the look of a button to any a element.

btn-success is used to make it look green in color. There are other classes as well, like btn-info, btn-default, btn-warning and btn-danger.

Footer Area

The footer is area is again similar to the content area. Here’s the markup.

  <footer>
          <div class="container">
          <div class="row">
            <div class="col-md-4">&copy; 2013</div>
            <div class="col-md-4">
              <ul class="nav nav-pills">
                <li class="active"><a href="#">About Us</a></li>
                <li><a href="#">Support 24x7</a></li>
                <li><a href="#">Privacy Policy</a></li>
              </ul>
            </div>
            <div class="col-md-4">
              <h3 class="text-right">Vacation Rentals</h3>
            </div>
          </div>
          </div>
        </footer>

We have used the HTML5 footer tag. Then a container div and a row. Then we’ve divided the whole area into three equal sections with 12 grids system in mind. Then we populated each sub division.

Some more Bootstrap 3 classes

.pre-scrollable

If you are using the <pre> tag, you can use .pre-scrollable to add scrollbars when the content inside it is too large. You can use it to show codes snippets too.

.table

If you are using the <table> tag, you can use the .table class to make it look bit more fancy in the Bootstrap style.

.pull-left & .pull-right

As the name suggests, it pulls the element to the left and right hand side of the screen.

.clearfix

This class is used to clear the float on any element.

So this was the “get-me-started” tutorial to Twitter Bootstrap 3. The main motive was to make you understand on how Bootstrap works. As you might have seen I haven’t written a single line of CSS code. Twitter Bootstrap handles it on its own with its predefined set of CSS and JS files.

One of the main disadvantage of Twitter Bootstrap is that it isn’t backwards compatible. So, if your website is built with Bootstrap 2 and if you replace all the CSS and JS files with that of Bootstrap 3, the website design will break down. They have made some changes to the CSS class naming and have improved the responsive nature of the resulting websites.

You can also add custom CSS to your website. Create your own CSS file with any name, for example customstyles.css, and import the bootstrap CSS into it. Then define your own style by using an appropriate element class or id. In this demo, I have used customstyle.css to change the background of the jumbotron element.

Here’s the demo page again.

So that was it! I hope you have enjoyed reading and learning about Twitter Bootstrap 3. Leave your comments or feedback below to communicate with me.

Update On Navbar

There are few more things that I had initially missed to make the navigation bar responsive. The whole navigation bar for Twitter Bootstrap should be like this:

<nav class="navbar-wrapper navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Vacation Rentals</a>
          </div>

          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
              <li><a href="#"><span class="glyphicon glyphicon-star"></span> Top Destinations</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span> About Us<b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Company Details</a></li>
                  <li><a href="#">Contact Us</a></li>
                </ul>
              </li>
            </ul>
            <form class="navbar-form navbar-right" role="search">
              <div class="form-group">
                <input type="text" class="form-control" placeholder="Search"/>
              </div>
              <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#"><span class="glyphicon glyphicon-asterisk"></span> Book Tickets</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-info-sign"></span> Reservation<b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Cancel</a></li>
                  <li><a href="#">Confirm</a></li>
                </ul>
              </li>
            </ul>
          </div><!-- /.navbar-collapse -->
        </div>
        </nav>

The navbar is divided into two sections:

  1. Navbar header
  2. Navbar contents

The navbar-header contains the website branding and hidden triple bars which is viewed only when the webpage is viewed on smaller device. The text Toggle navigation is also important for screen reader devices.

I hope this will fix the problem that several of you pointed out. Thanks for reading.

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

Learn to build websites with Bootstrap from the ground up with our best-selling guide, Jump Start Bootstrap. It’s yours for free with a Learnable trial.

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.

  • Anonymous

    As always, a great tut. Thanks :)

  • Shubham

    Awesome & very informative , thanks for shareing.

  • Joe Zim

    The responsive menu doesn’t seem to be working. At least, once it’s shrunken down to hide behind that one button, the button isn’t bringing up the menu.

  • john petroshius

    can’t get your demo navbar to work…no good on desktop with small browser window or on iPhone….

  • Ahmad

    Umm … according to http://getbootstrap.com/components/#navbar-fixed-top the “navbar-wrapper” class should be only “navbar” … I searched the bootstrap.css file and it has no navbar-wrapper class defined.

  • Keith Jones

    I am also having problems with navbar.

  • Keith Jones

    I think that:
    1. Toggle Button code is missing.
    2. Comment 3. Source of jquery.js could be a problem.

    Toggle Menu not working on Demo.

    Keith

  • Sidney

    Same here… nice tut but navbar toggle not working

  • Joseph Myalla

    thanks for your inspiring articles on Bootstrap 3

  • Keith Jones

    I’ve cheated this a bit but it does work. I’ve taken the HTML from demo page where drop down menu does not work.
    From the original download I’ve taken the navbar static top example and cut out the menu HTML and pasted it into Demo HTML.
    For script using:

    jquery.js is from original download.

    Keith

  • Jane

    Great tutorial, but in the real world you’ll want to build several pages with some common content, eg. navigation and footer. In Bootstrap, how do include these elements once only?

  • Savitha gowda

    its really good
    Please teach in Bootstrap.js also

  • mike

    I guess you could split the the template into header, footer and content files and combine using php.

  • Fluent

    Hi Syed great tutorial but the navigation still doesn’t work. This could put beginners off.

  • Cecile

    I agree, the navigation dropdown menu (small screen width) doesn’t open when I click on it.

  • Anonymous

    The same thing happened here.The problem is the two links at the bottom of the page. I found that I had to put “http:” in front of the first one. The second one didn’t work until I typed in the whole path to the file on my computer.

  • mastan

    Hi please tell me how to font sizes automatically change in diffrent devices in bootstrap 3.0

  • Anonymous

    Cecile, I removed “ex1″ in line 5, and the small screen dropdown menu worked.

  • Fluent
  • Josh

    ‘If you ever want to know what any class in Bootstrap does, just open your bootstrap.css file, find the respective tag and read the documented comment above it.’ – I can’t see hardly any comments. Where are these?

  • Anonymous

    Thanks Syed for your tutorials.

    One thing. The demo page has an issue in my Samsung S2: the menu buttons doesn’t work, it doesn’t display the options when clicked. Do you know why?

  • Russ

    Removing the “ex1″ in line 5 as stated above worked for me also.

    Even int he demo it doesn’t work as it should, but a good tutorial otherwise….

  • Sidney

    Somebody could say me (please) what role=”navigation” really does? I take it off and it seems nothing happened, everything works ok in big or small screens… some help? thanx

  • madpixl

    Can someone let me know if this is the best structure for a site that will have multiple projects?
    I’m thinking
    -assets 3rd party code/plugins etc.
    -dist – Twitter Bootsrap main directory
    -Each_Project
    -css
    – js
    -img
    html/xhtml/php files whatever

    … That way we don’t need to create an instance of everything each time we add a project to our app. We just refer to the dist… And that way we only replace the dist with newer version of tbs…. Does that make sense or is it not standard?

  • Janu

    Hey Syed Fazle Rahman,
    are you sue that the container-fluid class is in BS3. Tried to find it in the source and it seems to be gone. Same on getting started page.

  • Keith Jones

    Janu

    I think you are right in 3 I do not think there is container-fluid.

    Thanks Syed for the tutorial, it has really helped me to get going on BS.

  • mastan

    Thank you verymuch for this tutorial, hope you will post clear describe of responsive in bootstrap 3.0. Thanks again

  • kmcquaid

    If I follow the nav bar container with a normal container as in the following code:

    Aztech Badminton Club

    Goldsmith Leisure Centre
    Eridge Road
    Crowborough

    The second container is partially hidden by the nav bar. If I use jumbotron instead of container the div is properly below the nav bar. Do you know how to fix it?

  • Keith Jones

    Try

    Body padding required

    The fixed navbar will overlay your other content, unless you add padding to the top of the . Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.

    body { padding-top: 70px; }

    Make sure to include this after the core Bootstrap CSS.

  • Keith

    container-fluid has been removed from bootstrap 3. See http://getbootstrap.com/getting-started/#migration-dropped

  • mastan

    Hi tell me how to put form validation without js in bootstrap 3.0

  • Joe

    The demo page source code (working) does not correspond to the code from the article (not working).

  • mike

    I can’t get the vertical menu to appear when I hit the toggle button. Any ideas?

    • Random

      Mike,

      I found that it’s the data-target on the button.

      I changed:

      • Afsar

        Thanks its working :)

  • Random

    I had to add a type=”text/javascript” to . Thought that might help.

  • ronnie

    Mike I think you should do more research and learning before making further postings on the blog. good luck

  • Afsar

    As always you rock bro, a great tut. Thanks so much….

  • Eugenia

    Thanks This tutorial really helped me

  • Alex

    Muy bueno este post, excelente

  • Mahesh

    Thanks for nice article. Keep it up!!!!

  • Anonymous

    Thanks for the article. Loved it!

  • Prashant

    Thanks for the article I really understand easily. Thanks a lot !!!!!!!!!!!!!!!

  • Jonathan

    Just please add some screenshot throughout the page so one can see what each part of code does. Otherwise great!

  • Anonymous

    I liked this article but how did you get the image in the jumbotron/change a jumbotron’s colour? Or colour another type of div? Thanks.

  • Anonymous

    Oh whoops, I missed this part at the bottom. “In this demo, I have used customstyle.css to change the background of the jumbotron element.”
    Although more info would be useful. It was the thing I came to the tutorial for! :)

  • ravinder singh

    clicking on the button in the nav bar does not open any drop down menu in your demo page. can you please check and provide the fix. thanks

  • Tao Zen

    How can I make the Mark-up of the footer? I need a full screen footer. Because the class “.container” I can’t extend the width of the footer completely. Please, help me!

  • Tao Zen

    How can I make the Mark-up for a full screen footer? Because the class”.container” I can’t extend the width of the footer completely.

    • Jijo Lopez

      Try use .row insted of container

      • Tao Zen

        Thanks!

  • http://www.chrisweekly.com/ cweekly

    After the navbar update, this seems like a decent intro-level writeup, thanks for writing it.

    But, fellow readers:
    customizing Bootstrap by importing into (compiled) .css is a performance anti-pattern. Please don’t do that, for your users’ sake. Learn to use LESS (the CSS preprocessor in which Bootstrap is written) and edit LESS @variables — and optionally cut out parts of Bootstrap your project doesn’t need. Then you can compile a smaller, customized stylesheet for your site that leverages Bootstrap properly.

    Bootstrap3 is a great UI framework, but using it is not a substitute for understanding web development technology. /$.02

  • Abdelrahman Bahnasy

    Great tutorial !

    in “Update On Navbar” you just forgot to add “navbar-ex1-collapse” class to Navbar contents ,

    so ( data-target=”.navbar-ex1-collapse” ) can work .

  • jonericson

    “This (css) file is completely self-explanatory. It has commented description just above each tag style.”

    I didn’t see the commented descriptions in the files. I also grabbed the source download, but still no joy.