Bootstrap and Responsive Design

Responsive Design comes in handy when you want the one application to look good for multiple devices with difference screen sizes such as a tablet, iphone and PC. By default bootstrap can achieve this by adjusting column and gutter widths as follows: 


For window width px

Adjust column width (span1)

Gutter width (in between columns)

Large display

1200 and up




980 and up



Portrait tablets

768 and above



Phones to tablets

767 and below

Fluid columns no fixed width


480 and below

Note the screen ranges will cause the columns widths and gutters to automatically adjust. 

View the following example bootstrap structured code.

<div class="container-fluid">

        <div class="row-fluid" style="border: 1px solid #000;">

            <div class="span3">

                <img src="Images/bulldogs.jpg" />


            <div class="span3" style="background-color: #ccc">

                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


            <div class="span1" style="background-color: #ccc">



            <div class="span2" style="background-color: #ccc">



           <div class="span2" style="background-color: #ccc">

                <img src="Images/bb.jpg" />





Note: The base css and javascript can be downloaded here

The required bootstrap class structure for responsive design is used in the above code. ie Container-fluid -> row-fluid -> “span?”. Another important point is the span determines the width of the column compared to the other columns Ie. Span 3 will be 3 times bigger than span 1. 

So now let’s see this in action:

1190px (desktop/notebook)


890px (portrait tablets)


470px (mobile)

So as you can see, bootstrap has resized the text as well as even resizing the images to suit the platform. Enjoy!