Responsive Web Design with Twitter Bootstrap

Introduction

This tutorial is about how to apply responsive design feature into your web layout. And in the course, you will also learn about Responsive Web Design. With the proliferation of mobile devices, it has become almost unavoidable that you don't have a version of your website which users can view well when browsing through mobile devices. And Responsive Web Design is a very efficient way to serve the purpose.

What is Responsive web design

Responsive Web Design is an idea of providing the user with best viewing experience of a website across devices of various sizes. For example, if you are viewing a website on a computer monitor and then viewing it on a smartphone, whose size is smaller than a computer monitor, but you don't need to stumble much to feel the same experience as if you were viewing it on a computer screen, there may be responsive design features enabled on that website.

While this discusses how to create a Responsive design with Twitter Bootstrap, we have started with an exclusive Responsive Web Design Tutorial.

We have applied responsive features on our Fluid Layout Example, and request you to view it on different screen sizes. You may resize your browser by using 'Window Resizer' browser extension for Chrome or FireFox.

You may view this example of responsive design with Twitter Bootstrap.

How does Responsive web design work

For responsive web deign to work, you need to create a CSS which comprises of styles suitable for various devices sizes, or better to say for various device size ranges. Once the page is about to load on a specific device, using various frontend web development techniques like Media Queries, the size of the viewport of the device is detected, then the styles specific to the device is loaded.

Diving deep into a Responsive Web Design CSS

We will take the 'bootstrap-responsive.css' in consideration and try to understand the nuances of how this 'Responsive Design' stuff is achieved. But before that, you must know that you have to add the following line within head section of your webpage:

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

The viewport meta tag, as it is commonly called as, overrides the default viewport and helps to load the style related to the specific viewport.

width property sets the width of the screen. It may contain a value like 320, denote 320 pixels or may have the value 'device-width' which tells the browser to use the native resolution(or width you may say for simplicity) of the device.

The initial-scale property is the initial scale of the viewport as a multiplier. So, when set to 1.0, it represents the native width of the device in question.

And of course, after that you must add the responsive CSS of Twitter Bootstrap like following:

<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

Now, if you look at the responsive CSS file, you would find that after declaring some general stuff (from line number 10 to 22), there are various sections starting with '@media'. And this is how styles for various device sizes are written.

The first of this sections starts with '@media (max-width: 480px)', which sets styles for devices whose maximum width is 480 pixels.

The second section starts with '@media (max-width: 767px)', which sets styles for devices whose maximum width is 767 pixels.

The third section starts with '@media (min-width: 768px) and (max-width: 979px)', which sets styles for devices whose minimum width is 768 pixels and maximum width is 979 pixels.

The next section is for devices with maximum width of 979 pixels. So, it starts with '@media (max-width: 979px)'.

Last two sections starts with '@media (min-width: 980px)' and '@media (min-width: 1200px)'; so the first one is for devices with minimum width 980 pixels and 1200 pixels.

So, what basically this style sheet does is, storing styles according to a minimum and maximum widths of the devices using 'min-width' and 'max-width' properties.

A little explanation

To make the layout responsive, Twitter Bootstrap does these three things :

1. It modifies the width of the column in the grid.

2. Whenever required, it uses stack element instead of float. if you are not very much clear about what is this stack element stuff, then the following form w3.org may be helpful:

The root element (html) forms the root stacking context. Other stacking contexts are generated by any positioned element (including relatively positioned elements) having a computed value of ‘z-index’ other than ‘auto’. Stacking contexts are not necessarily related to containing blocks.

3. To render headings and text properly, it resizes them when required.

Develop mobile-friendly layouts faster

Twitter Bootstrap has several utility classes for developing mobile-friendly layouts faster. These classes are available on 'responsive.less'.

.visible-phone, visible on Phones of width 767px and below, hidden on Tablets of 979px to 768px and also hidden on Desktops, which is default.

.visible-tablet, hidden on Phones of width 767px and below, visible on Tablets of 979px to 768px and hidden on Desktops, which is default.

.visible-desktop, hidden on Phones of width 767px and below, hidden on Tablets of 979px to 768px and visible on Desktops, which is default.

.hidden-phone, hidden on Phones of width 767px and below, visible on Tablets of 979px to 768px and visible on Desktops, which is default.

.hidden-tablet, visible on Phones of width 767px and below, hidden on Tablets of 979px to 768px and visible on Desktops, which is default.

.hidden-desktop, visible on Phones of width 767px and below, visible on Tablets of 979px to 768px and hidden on Desktops, which is default.

You may download all the HTML, CSS, JS and image files used in our tutorials here.

Previous: Twitter Bootstrap Layout tutorial
Next: How to disable responsive feature of Twitter Bootstrap