Sep 302014

Designing a web site has always been more of an art than a science. A web page is made of multiple areas: header, footer, sidebars, main content, etc. Inside of each of those areas, the designer places elements of many different types: blocks of text, menus, buttons, forms, images,… The result must be aesthetically pleasing, without compromising the usability.

To make things more difficult, the appearance of mobile devices with all types of screen sizes and resolutions poses a new challenge, as the design should ideally be “responsive”, adapting to the characteristics of the device where the pages are being rendered.

To ease this task, Twitter has released to the community of web developers and designers a free, open source design framework known as “Bootstrap”. This framework enforces a set of style guidelines, and includes a javascript library that implements the functionalities required to achieve an homogeneous, appealing and user-friendly design.

This post examines the possibilities offered by Bootstrap, and gives a brief introduction on how to make use of it.

Download and installation

In the Bootstrap home page there is a download button that gives access to the download page. The name of the file downloaded is, and is 200 KB in size.

Uncompressing the zip file under the directory where we want to install bootstrap, three subdirectories “js”, “css” and “fonts” are created. The pages designed to use Bootstrap will include references to the compiled javascript libraries, style sheets and fonts in those subdirectories.

Example 1 – Hello, World

As the first example, we will create a “Hello, World” web page using bootstrap. The HTML code of the page is:

    <!DOCTYPE html>
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <h1>Hello, world!</h1>
    <script src=""></script>
    <script src="js/bootstrap.min.js"></script>

In this code, we can notice that:

  • The first line specifies that this is a document in HTML5 format. Some of the functionalities in bootstrap require a browser compatible with this version of the HTML format.
  • The Bootstrap CSS stylesheet is added in the header section.
  • JQuery is a dependency of Bootstrap. The JQuery javascript library is added at the bottom of the body section, and the Bootstrap javascript library is added immediately after.

The “Hello, world” page is rendered in the browser as shown below:


Hello World with Bootstrap


Hello World without Bootstrap

At first glance, we can notice that the default font type used to render the text has changed Looking a bit closer, we might also notice that the default left margin has been set to zero pixels in the document using bootstrap.

Example 2 – Top menu

In this example we are going to add a top menu to the page. To do this, add the HTML code below immediately after the <body> tag:

    <!-- Fixed navbar -->
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-collapse collapse">

        <div class="navbar-header">
          <a class="navbar-brand" href="#">Project name</a>

        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" 
                 data-toggle="dropdown">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>

          <ul class="nav navbar-nav pull-right">
            <li><a href="#">Login</a></li>
            <li><a href="#">Register</a></li>

        </div><!--/.navbar-collapse -->

The menu options in this HTML code are written as unordered lists (<ul>…</ul>) the design and functionality is added by assigning bootstrap classes to the HTML elements: navbar, navbar-fixed-top, dropdown, pull-right, etc.

We must add also a style definition under the reference to bootstrap.min.css, above the closing</head> tag:

    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;

This CSS code creates a gap of 60 pixels at the top of the page, to accomodate the menu.

Here is how our top menu looks like in the browser:


As can be seen, Bootstrap has applied a nice design to the top menu, and besides it has incorporated the functionality required by the dropdown menu, with a minimal effort required from the designer.

Responsive design

We have already mentioned that one of the main challenges that web designers mut cope with these days is the great variety of devices where the page mith be rendered: desktop computers, portable computers, tablets, smartphones,… The design must adapt to the many different screen sizes and resolutions of these devices.

Bootstrap also helps implementing a responsive design to deal with this problem.

To make a page responsive, add the following lines under the line that includes “bootstrap.min.css”:

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

Then, add to the <div class=”navbar-header”> element a button  that will be displayed instead of the full menu when the page is rendered in small screens:

        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed"
                                data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          <a class="navbar-brand" href="#">Project name</a>

We can now reload the page in the browser and reduce the size of the browser window, to check the result. When the window width is less than a given threshold, the top menu is replaced with a single button. When the button is clicked, a dropdown menu is displayed showing the elements in the top menu:


Collapsed menu in small screen


Menu dropdown in small screen

This brief introduction to bootstrap can give an idea of the possibilities offered by this framework. In next posts we will explore in more detail the characteristics and features of Bootstrap, and will review the large collection of plugins available that extend the functionalities of this useful library.


Bootstrap website

 Posted by at 4:21 pm

 Leave a Reply