Tags : Web Development
16Apr2013

Bootstrap and Responsive Design

Tags : Web Development

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: 

Label

For window width px

Adjust column width (span1)

Gutter width (in between columns)

Large display

1200 and up

70px

30px

Default

980 and up

60px

20px

Portrait tablets

768 and above

42px

20px

Phones to tablets

767 and below

Fluid columns no fixed width

Phones

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>

            <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>

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

                A

            <div>

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

                B

            <div>

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

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

            <div>

        <div>

    <div>

 

Note: The base css and javascript can be downloaded here http://twitter.github.io/bootstrap/

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!