Table of Contents

1. Preface

Are you one who doesn't have great design skills but looking for stuff to create nice templates in a short time? Are you one who recently heard about this nice framework calledTwitter Bootstrap and don't have much knowledge or experience to customize and create some website that represents your brand? Well folks, this tutorial is for you.

Actually, this is not just a tutorial but workshop. At the end of this workshop, you'll gain two things: First, you'll have a beautiful blog template that you could use right away for your website. Second, which is the most important thing, you'll know how to create stunning templates by yourself which jaw-drops others. Here after, you won't be googling to search for any free template, because you know how to create one with the help of Bootstrap. At the time of writing this, the latest version of Twitter Bootstrap is 3, we'll be using the same in this workshop.

"Give a man a fish and you feed him for a day. Teach a man to fish and you feed him for a lifetime."

Due to time constraint and content size, I've divided this workshop into two parts. In the first part, which is going to be very simple, we are going to create a complete blog template using Bootstrap. At the end of this first part, you'll have a nice blog template with home, single-post, contact and about-me pages.

In the second part, which is going to be more interesting one, where we'll see, how we can download the Bootstrap source code and customize it to create our own theme that matches our imagination.

2. Part I – Create basic blog template with Bootstrap 3

As I already said, in this part, we'll create the basic blog template using Bootstrap 3 that includes all the pages required for a typical blog like home, single-post, contact and about me pages. At the end of this part, you'll have a complete blog template that you can use right away.

The below images show how our blog template appears in mobile and desktop screens after completing this part.

Blog template (Mobile)

Fig 1. Blog template (Mobile)

Blog template (Desktop)

Fig 2. Blog template (Desktop)

After completing this part, I recommend you to go through part 2 that will teach you how you can customize and create your own custom theme.

3. What tools we need?

  •  Text editor
  •  Google Chrome Browser

You need a text editor for composing html, css and js files. At the moment, my favourite one is Sublime Text 2. You could use any one of your choices. You would also need a mobile emulator. A mobile emulator helps you to see how the page appears in a preferred mobile device. We can use Google's Chrome browser for emulation which emulates the output to more than dozen devices from Amazon Kindle to Sony Xperia.

4. Twitter Bootstrap? What's that?

Twitter Bootstrap is a front-end framework developed by couple of good hearted guys from Twitter - Mark Otto and Jacob Thornton. The framework helps you to easily create website layouts through mobile first approach using its powerful grid system and lot of widgets. The framework provides a lot of CSS classes through which you can convert a plain looking unordered list into an amazing navigation component. Bootstrap helps developers who have a very little design knowledge to quickly wrap up a decent looking website.

The framework is MIT licensed and have a strong development community of over 400 contributors in GitHub. Thousands of websites uses Bootstrap for front-end decoration and some of the quick ones I found in net are: WebflowSentryEngine Yard etc. Many websites that uses Bootstrap don't customize much, which make users eyes weary with the same look and feel. We are not going to do the same mistake, promise!.

Bootstrap is built on the foundation of LESS. Through LESS we can easily customize the framework according to our brand. There are many tools available like JetStrapLauoutIt etc. helps us to dynamically craft website templates online using Bootstrap.

5. Creating a blog template

There are lot of bootstrap blog templates available online for free and paid; but, it's usually hard to find something that exactly meets your dream. Luckily with Bootstrap, creating a perfect template is not a hard job and you are going to see it how. One important thing I've to take into account is, I want the blog template should give best user experience for non-desktop (mobile, tablets) users as well. With Bootstrap 3's new mobile first approach this is terribly easy now. Starting things from the small screen helps us to focus on primary content first. We'll try to apply the same approach throughout in this workshop.

In this first part of the workshop, the following are the tasks we are going to do.

1. Create the home page 
2. Create the single post page 
3. Create the contact page 
4. Create the about me page

Yeah, that's very high-level breakdown. We'll break each into further sub-tasks on the way.

6. Create the home page

In creating the home page, we will be doing most of the plumbing work required for other pages as well. Before getting into code, you should mentally visualize about the layout, the primary elements, their placement in the page from small to big screen. You could use a rough paper or some online tool like Balasamiq to draw the mockups that resides in your mind. I've used Balasamiq.

What you see below are the mockups that I've come up for the home page, both mobile and desktop.

Home page mockup (Mobile)

Fig 3. Home page mockup (Mobile)

Home page mockup (Desktop)

Fig 4. Home page mockup (Desktop)

Do you like the design? Pretty simple and straight, isn't it? Pardon me, I haven't kicked my imagination horse too hard, I guess!

In mobile devices, we want the site to flow as a single column. In tablets, desktops we want the content stream to divide and flow into two columns. The layout is composed of header and footer which is shared across pages. If you scan the design, the important elements are header (which contains logo, navigation and search textbox), main body content (displays the latest blog posts), sidebar and footer. Not only for the main elements, we should think about the structure and arrangement for each small element like the repeating post section, sidebar widget and others. The design pretty much tells the story about most of them.

I hope we are clear with the design, it's time to make the playground ready!

  • Pick up the right editor
  • Download Bootstrap and jQuery libraries

6.1 Pick up the right editor

There are lot of text editors available for editing html, css and js files. Couple of the tools I frequently use are Notepad++ and SublimeText 2. Now-a-days, I spent most of the time with SublimeText 2. You can use any one of them or some other.

SublimeText 2

Fig 5. SublimeText 2

6.2 Download Bootstrap and jQuery libraries

You can download Bootstrap library from their website.

Bootstrap Website

Fig 6. Bootstrap Website

The Bootstrap website itself designed using Bootstrap 3, you could already feel what we are up-to, don't you? You could see two big buttons "Download Bootstrap" and "Download Source". Please click the first one. The later one will download the complete source code which we'll be doing anyway in Part 2.

Bootstrap has dependency with jQuery. You can download the latest version of jQuery from their website. You could also refer from CDN if you wish.

Create a new folder called MyBlogTemplate somewhere in your hard drive that should include both the downloaded libraries.

Project folder structure

Fig 7. Project folder structure

If you are using SublimeText 2, you can open the folder MyBlogTemplate using the "Open Folder" option from the "File" menu.

Project folder

Fig 8. Project folder

If you see the home page mockup (Fig 3 & 4), its body content is divided into two: main or primary content which contains the list of latest posts and sidebar which contains stack of widgets. In mobile, both the main content and sidebar occupies 100% of the screen. Since, we've more room in desktop, the primary content takes 2/3rd (67%) and the sidebar takes 1/3rd (33%) of the entire screen.

I've broken down the complete home page creation tasks into the following subtasks.

a. Create the basic structure 
b. Create page header that wraps logo, navigation and search textbox 
c. Create single and two-column layouts for main content and sidebar 
d. Create the HTML markup for latest posts section 
e. Create sidebar widgets

For each task, we are going to leverage Bootstrap to create the markup.

6.3 Create the basic structure

Here we go with our first task - preparing the basic HTML.

Create a new file with name index.html under the folder MyBlogTemplate. Fill the file with the below stuff.

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
<head>   
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A Bootstrap Blog Template">
    <meta name="author" content="Vijaya Anand">
    <title>Home</title>
</head>
 
<body>
</body>
</html>

Listing 1. Base markup in index.html

You already know about most of the pieces which I filled above, though, I would like to explain about couple of them: DOCTYPE and Viewport meta tag.

6.3.1 HTML5 DOCTYPE

1
<!DOCTYPE html>

Listing 2. DOCTYPE tag

We are going to build our pages in HTML5. The above line tells the browsers, "Hey, this page is written in HTML5, please use the same to validate".

More about DOCTYPE

The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag.

The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in.

In HTML 4.01, the <!DOCTYPE> declaration refers to a DTD, because HTML 4.01 was based on SGML. The DTD specifies the rules for the markup language, so that the browsers render the content correctly.

HTML5 is not based on SGML, and therefore does not require a reference to a DTD.

Tip: Always add the <!DOCTYPE> declaration to your HTML documents, so that the browser knows what type of document to expect.

http://www.w3schools.com/tags/tag_doctype.asp

6.3.2 Viewport meta tag

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

Listing 3. Viewport meta tag

<meta> tags are uses to convey metadata information (description, keywords, author) about HTML documents. The above meta-tag gains more importance in regard with mobile browsers. It tells the browser to take device width as the virtual viewport width (see the below help section) and set the zoom level to default, this makes the browser not to completely zoom out the site and show it small.

A tale of two viewports: layout viewport and visual viewport

George Cummins explains the basic concept best here at Stack Overflow:

"Imagine the layout viewport as being a large image which does not change size or shape. Now image you have a smaller frame through which you look at the large image. The small frame is surrounded by opaque material which obscures your view of all but a portion of the large image. The portion of the large image that you can see through the frame is the visual viewport. You can back away from the large image while holding your frame (zoom out) to see the entire image at once, or you can move closer (zoom in) to see only a portion. You can also change the orientation of the frame, but the size and shape of the large image (layout viewport) never changes."

http://www.quirksmode.org/mobile/viewports2.html

Before diving into further development let's reference the Bootstrap and jQuery libraries in our index file.

6.3.3 Reference jQuery and Bootstrap libraries

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>   
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A Bootstrap Blog Template">
    <meta name="author" content="Vijaya Anand">
 
    <title>Home</title>
 
    <!-- Bootstrap CSS file -->
    <link href="bootstrap-3.0.3/css/bootstrap.min.css" rel="stylesheet" />
    <link href="bootstrap-3.0.3/css/bootstrap-theme.min.css" rel="stylesheet" />
</head>
 
<body>
    <!-- Jquery and Bootstrap Script files -->
    <script src="jquery-2.0.3.min.js"></script>
    <script src="bootstrap-3.0.3/js/bootstrap.min.js"></script>
</body>
</html>

Listing 4. Referencing Bootstrap and jQuery libraries

We've referenced two CSS files: bootstrap.min.css and bootstrap-theme.min.css. Thebootstrap.min.css is the basic CSS file, which is mandatory. The second one, bootstrap-theme.min.css is optional which decorates the Bootstrap components with gradient and other arbitrary styles - a pleasing effect to the components!

6.3.4 Create the foundation

The layout can be segmented into three regions: header, body and footer. The header section contains the logo, navigation and search-box. The main content section varies from page to page. The footer section contains the typical copyright information.

To create these sections, let's throw some basic elements under <body>.

1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
    <header>         
        -- Logo, Navigation & Search Bar--
    </header>
 
    <div id="body">  
        -- Site Main content --
    </div>
 
    <footer>
        -- Copyright information --
    </footer>
</body>

Listing 5. Header, body and footer elements

We have used HTML5 elements for header and footer sections. The primary content of the body is represented by an empty div. If you open the file in browser, you could see the below screen - nothing interesting at the moment!

Fig 9. Home page

How about seeing the output in mobile mode? If you are using chrome, you could TURN ON the emulation mode by pressing F12. If you did, you could see a new container below the usual one which contains a menu called Emulation. If you don't see the Emulation tab make sure you have turned on the "Show 'Emulation' view in console drawer" from the Settings.

Fig 10. Emulation mode

You can select any device from more than dozen options, I've selected the Apple iPhone 5. On clicking the Emulate button you could see the browser output transformed into iPhone screen. Cool, isn't it?

Fig 11. Page in iPhone5

6.3.5 Bootstrap's container  class

The page looks very normal in both desktop and mobile screens. Though the <header> and <footer> elements are not styled by Bootstrap, it overrides the default font-system and applies some predefined styles to the h1, h2..., anchor elements. Bootstrap mostly applies styles through CSS classes. If you notice the <header> and <footer> elements (Fig. 9 & Fig. 11), there is no much room for the placeholder texts resides inside them. It would be great if we set some padding for each of them to help their children get more room for breathe.

Before you think to create a CSS class and apply to each element, I would like to reveal you the first important class from Bootstrap called container. Containers are used to centre an element with padding at both left and right sides. It sets a fixed width to the element but the set width will be changed based on device's width.

Instead of directly applying the container CSS class to the <header> and <footer> elements, please create a child <div> element and apply to it. Applying the class directly on the <header> and <footer> element will not give the desirable design which we want here.

After you've done with the changes, the markup should look as below.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<body>
    <header
        <div class="container">
            -- Logo, Navigation & Search Bar —-
        </div>
    </header>
 
    <div id="body" class="container">
        -- Site Main content --
    </div>
 
    <footer>
        <div class="container">
            -- Copyright information –
        </div>
    </footer>
</body>

Listing 6. Applying "container" class

If you open the file in browser, it would look little better now. We've completed our first task. Let's work on the next one: header, which is going to be little tricky and interesting.

6.4 Create page header that wraps logo, navigation and search textbox

We are going to target an important piece in this task: navigation header. The header is composed of three pieces: logo, navigation and search-box. To implement this task we need to study what are Bootstrap components and what components they provide to support navigation. Let's spend some time on that.

6.4.1 Bootstrap components

Bootstrap provides a bunch of reusable components. We've components for icons, dropdowns, navigation, button groups, alerts, progress bars and more. These components are created through HTML markup decorated with special CSS classes from Bootstrap. Having a good knowledge of these CSS classes is like having a mighty sword in your hand, very helpful! It's not just the styles Bootstrap controls many things through CSS classes.

A simple Bootstrap component: Navigation

To create a navigation component you have to use following HTML markup with the shown CSS classes.

1
2
3
4
5
6
7
8
9
10
11
<ul class="nav nav-tabs">
    <li class="active">
        <a href="#">Home</a>
    </li>
    <li>
        <a href="#">Profile</a>
    </li>
    <li>
        <a href="#">Messages</a>
    </li>
</ul>

Listing 7. Navigation markupfiddle it

This is how the navigation appears in Desktop Chrome.

Navigation component (Mobile & Desktop)

Fig 12. Navigation component (Mobile & Desktop)

For creating navigation headers, Bootstrap provides a nice component called Navbar. This component is more like an extended model of the navigation component (Nav). We are going to use this one for creating our navigation header.

6.4.3 A simple Navigation Bar

Let's start with simple! We can create a simple navigation bar with links to three pages with the below markup.

1
2
3
4
5
6
7
<nav class="navbar navbar-default">
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">About</a></li>
    </ul>
</nav>

Listing 8. Navigation bar markupfiddle it

If you view the above html fragment in the browser, you could see the below screens in mobile and desktop views.

Navigation bar (Mobile)

Fig 13. Navigation bar (Mobile)

Navigation bar (Desktop)

Fig 14. Navigation bar (Desktop)

In case of mobile, the navigation links are stacked one below another. While in desktop, since we have more room there, they sit horizontally next to each other. That's one of the best examples of "responsiveness". Internally, Bootstrap uses media queries to set breakpoints at different widths and adjust the styles of the NavBar component. Media Queries is a CSS3 feature that helps to render new styles based on screen resolution.

CSS 3 Media Queries

Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution. It became a W3C recommended standard in June 2012 and is a cornerstone technology of Responsive Web Design.

Media Queries can be applied to link element or it inline stylesheet.

1
2
3
4
5
6
7
8
9
10
11
<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
 
<!-- CSS media query within a style sheet -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

Listing 9. Media Queries

Let's explore the markup for the simple navigation bar and understand what are the important classes used to create it.

6.4.3.1 Exploring Markup

If you go through the markup shown in listing 8, we have a <nav> element that wraps an <ul> element. The <nav> element is decorated with two CSS classes navbar and navbar-default. It's these classes enhances the <nav> element to appear as a navigation bar. The former class gives the basic structure to the component while the later one gives the default style.

Instead of navbar-default you could also apply another CSS class called navbar-inverse. Well, what it does? It makes the navigation bar to stand-out like a dark knight, we'll be using the same in our case.

We need links to navigate to different pages and so we've an <ul> element. Note that, the <ul> element also decorated with couple of CSS classes: nav and navbar-nav. The nav class represents the <ul> element is used for navigation and navbar-nav tells bootstrap that the element appears inside a navigation bar and so decorate it accordingly.

Unless, we've an extra-ordinary memory system, It's difficult to remember all these classes, but, once you start using them frequently you will type them without knowing it.

6.4.4 Improving Navigation Bar for Mobile

The navigation bar appears to be OK in case of mobile views but not great! In mobile screen, they occupy most of the top space and user has to scroll down to see the main content which is definitely not a best user experience. A better approach is to collapse the navigation links and show them on clicking some button as shown below.

Responsive navigation (Collapsed)

Fig 15. Responsive navigation (Collapsed)

Responsive navigation (Expanded)

Fig 16. Responsive navigation (Expanded)

The above strategy is popular in small screens. To achieve that, we've to do changes to the markup and here where things going to get little complicated!

In our blog template, the header itself acts as navigation and so I've to apply the navigation bar classes directly to the <header> element itself. Also, taking the collapsible strategy into account, I've to make the following changes to the <header> element.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<body>
    <header class="navbar navbar-default bs-docs-nav" role="banner">             
        <div class="container">
            <div class="navbar-header">
                <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">About</a></li>
                </ul>
            </nav>
        </div>
    </header>
...
</body>

Listing 10. Responsive navigation markupfiddle it

It's little bad and verbose, agreed! I request you to stop here and take a good look at the markup before jumping to the next section.

6.4.4.1 Exploring the Markup

We can divide the markup (listing 10) into two sections: header (div.navbar-header) and navigation (div.navbar-collapse). The header section contains the trigger button which is used to invoke the navigation to expand or collapse in the mobile screen. The navigation section contains the unordered list of links which we saw earlier.

These two sections behave differently in case of desktop and mobile views. In case of desktop screen, the button is hidden and the navigation section is displayed. While in case of mobile view, the button is shown and navigation section is hidden as default. When you click the button the navigation shows up.

Following are some of the interesting things to keep note about the markup.

6.4.4.1.1 The role  attribute

We have used a special attribute called role in two places: <header> and <nav>. The HTML5role attribute is used for accessibility. It is used to convey screen readers and other devices about the role the corresponding element plays like banner, navigation, logo etc.

This CSS class is used to represent the header section which contains the button that is used to show the navigation in mobile screen.

6.4.4.1.3 The button  element

Instead of button, you can use some other element as well. It is the CSS classes and the data attributes we've used in the element tells bootstrap "this is the element that is used to trigger to show navigation". One important data attribute I should highlight is the data-targetattribute which is used to establish the connection between the button and the navigation list.

6.4.4.1.4 The sr-only  attribute

The sr-only is a bootstrap attribute mainly used for accessibility. They are used in labels and other elements that render in browser but not visible to the user. They convey screen readers what role they play. You can see contact forms that contain only input fields without labels. The placeholder attribute is used to convey the user whether it is a name, email or some other. But, this UX design makes difficult for screen readers and vision impaired people. If you drop a label and make it hidden, screen readers can read aloud the input field which helps the visually impaired person to enter proper information.

6.4.5 Final touches to the Navigation header

Before wind-up, I would like to do some additional changes to the navigation header. First, I want the header to stand-out by applying a different style navbar-inverse. I also want the navigation to always stay fixed in the top, that helps me to easily navigate no matter where I'm in the page. I also want our brand name (Astrospace) to be displayed at left and a search form to be displayed at the right end as you see in the mockup.

Here we go...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<body>
 
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">        
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-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 href="index.html" class="navbar-brand">Astrospace</a>
        </div>
        <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
            <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">
                <li class="active"><a href="index.html">Home</a></li>
                <li><a href="contact.html">Contact</a></li>
                <li><a href="about.html">About</a></li>
            </ul>
        </nav>
    </div>
</header>
...
</body>

Listing 11. Responsive navigation markup finalfiddle it

The navbar-inverse class gives a dark background to the navigation header. To make the bar always appear in the top, I've to apply an additional CSS class called navbar-fixed-top.

The logo, which is usually a link has to be placed in the header section. By applying the special class navbar-brand to the link, it stand-out in font-size and differentiate itself from other links. Usually we drop the logo image inside the link to reflect the brand; but to keep things simple, I've used plain text.

You can drop any element inside the <nav> element and so dropping a search form is not a big deal. But important thing is, I've to apply couple of bootstrap classes namely navbar-formand navbar-right to set the form inline and right aligned. We'll see more about bootstrap forms when we design the single post and contact pages. Don't worry about them now. For your info, I also replaced the link elements href attribute value ("#") with corresponding files.

If you run the file in browser, the navigation header appears like below in mobile and desktop.

Navigation (Mobile)

Fig 17. Navigation (Mobile)

Navigation (Desktop)

Fig 18. Navigation (Desktop)

That's awesome, isn't it? Our navigation bar is ready! It looks beautiful in both desktop and mobile with less work.

There is a small glitch! Both the div#body and footer sections are not visible. This is because we have made the header as fixed and so both the sections have moved up. To make them visible, we have to apply some top margin to the body.

Create a new style file called blog.css in the same folder and add a top margin for 75 pixels to the body. Don't forget to reference the CSS file in the index.html file.

1
2
3
body {
    margin-top: 75px;
}       

Listing 12. Applying top margin to body

If you refresh the page now, you can see both the <div> and <footer> elements visible. That's it, you've completed a big piece.

Home page with navigation

Fig 19. Home page with navigation

It's little hard to make things work in different screens, isn't it? Alright, in the coming sections, I'll introduce you grid systems and forms which are going to be pretty interesting, especially "grids"!

6.5 Create single and two-column layouts for main content and sidebar

If you re-look at mockups (Fig. 3 & 4), our main content is split into a two-column layout for desktop screen and combined into a single column in mobile screen. In case of desktop, the first column contains the latest posts and the second column contains the sidebar. While in mobile screen, the sidebar falls below the main content. Before getting into the nitty-gritty details of creating column layouts I think it's time to give you a brief about Grid Systems, a must-to-know piece!

6.5.1 Grid Systems

Grid Systems are used for creating page layouts through a series of rows and columns. Using grids helps you to visualize easily where to place a piece of content and how much space it can consume in a web page. Initially, tables are used for creating grids but once the community started to see the inflexibility they brings they avoided (hated?) them and started to use floated divs.

The 960 Grid System is the CSS framework that caught the initial attention of the web community. Now, there are many popular frameworks out there like Blueprint CSSYAML 4,Skeleton etc. Bootstrap is one of the popular library that recently joined this club with pride. All these frameworks divide the viewport into "n" number of columns, typically, "n" is 12.

Grid System

Fig 20. Grid System

I would encourage you to learn about grids and their history. If you google "Grid Systems" you can find lot of links. I've found this one quite interesting, worth to read.

6.5.2 Bootstrap's Responsive Grid System

Bootstrap provides a 12 column grid system. If you take a desktop screen of width 1024 px, the total viewport is divided into 12 columns. The width of each column is 78px and the gutter width (gaps between column content) is 30px (15px on each side of column). The width of columns and gutters varies based upon the screen size.

Bootstrap's grid system is responsive. When I say responsive, which means, the grids adjusts or adapts based upon the screen or viewport size. For example, a single column grid designed for mobile screens can be transformed into a two column grid for tablets, desktops and as a three column grid in case of big screens like TVs, by applying proper CSS classes. Doesn't that sounds great?

Bootstrap provides different groups of CSS classes to control the layout for different screen sizes. For example, in case of desktops, they provides col-md-* (col-md-1 to col-md-12) group of classes to control the layout. To control the layout for mobiles and tablets, it provides col-xs-* and col-sm-* groups. It also provides col-lg-* classes for large screens like TVs. The middle segment of the CSS class "xs", "sm", "md" and "lg" represents the screen size (extra small, small, medium and large) and the last segment which is an integer represents the no. of columns the particular element has to span. In Bootstrap, an element can span upto 12 columns and of-course you can customize this number.

Bootstrap Grid System

Fig 21. Bootstrap Grid System

6.5.3 Simple Grid

Let's say you want to create a three-column grid for desktop screen. First, you should create a row by applying the row class to a block element like div. Inside the row element you have to create three child elements and each element should be decorated with the CSS class col-md-4. If you sum up the integer part of all the classes they equals to 12, simple rule!

1
2
3
4
5
<div class="row">
    <div class="col-md-4">Column 1 - span 4 columns</div>
    <div class="col-md-4">Column 2 - span 4 columns</div>