Responsive layout in Bootstrap

How to create grid based responsive layout in Bootstrap?

In previous post, we have already understood different Bootstrap classes that is used to create columns in Grid based layout. Here we will understand how to use them and in what scenario.

In order to create Grid based layout, we need to use following Bootstrap classes

container - as the name suggest, it works as a container for the page content. It is used for fixed width layout

for screen width between 768px to 991px, the container width will be 750px
for screen between 992px and 1199px, the container width will be 970px
for screen more than 1200px, the container width will be 1170px

container-fluid - as the name suggest, it also work as a container for the page content however it is used for fluid (full width) layout

the width will be as per the width of the screen

row - used to clear any floating related styles of before and after elements and ensure that a clean horizontal sapce is created for inside elements. It is a horizontal group of columns.
col-xx-x - used to specify the width of the column.

How col-xx-x classes works?

The complete screen width (100%) is divided into 12 columns and it's width changes depending on the screen sizes. So the column width is determined depedning on which col-xx-x class we are using. The 2^nd segment of the class name tell us the screen size.

col-lg-n - lg stands for large screen where screen width is more than 1200 px (large desktop screen)
col-md-n - md stands for medium size screen where width is between 992px to 1199px (laptop or small desktop screen)
col-sm-n - sm stands for small screen where the width is between 768px to 991px (tablet screen)
col-xs-n - xs stands for extra small screen where the width is between 0px tp 767px (phones screen)

So when we say

<div class="col-md-3"></div> - it means that this div will occupy 25% (12/3 = 4, so 100/4 = 25) width of the medium and large screens. In small or extra small screen, it occupies the entire screen (100% as no css class is written for small and extra small).
<div class="col-lg-3 col-md-4"></div> - (notice that we have two css classes here) it means that this div will occupy 25% width in large screen and 33.33% (12/4 = 3 so 100/3 = 33.33) width in medium screen. In small and extra small screen, it occupies 100% width. So above two <div> will have same effect.
<div class="col-lg-3 col-md-4 col-sm-6"></div> - (notice 3 css classes here) it means that this div will occupy 25% width in large screen, 33.33% width in medium screen and 50% (12/6 = 2 so 100/2 = 50) width in small screen. In extra small screen, it occupies 100% width.
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"></div> - (notice 4 css classes here) it means that this div will occupy 25% width in large screen, 33.33% width in medium screen, 50% width in small screen and 100% (12/12 = 1 so 100/1 = 100) width in extra small screen.

To better understand, we can say <div> having class

col-xx-1 = occupies 8.33% width of the screen

col-xx-2 = occupies 16.66% width of the screen
col-xx-3 = occupies 25% width of the screen
col-xx-4 = occupies 20% width of the screen
col-xx-5 = occupies 41.66% width of the screen
col-xx-6 = occupies 50% width of the screen
col-xx-7 = occupies 58.82% of the screen
col-xx-8 = occupies 66.66% of the screen
col-xx-9 = occupies 75.18% of the screen
col-xx-10 = occupies 83.33% of the screen
col-xx-11 = covers 91.74% of the screen
col-xx-12 = occupies 100% of the screen

As per above calculations, below code

<div class="container">
        <div class="row">
            <div class="col-md-3">col-md-3</div>
            <div class="col-md-9">col-md-9</div>
        </div>
</div>

would result in following layout

The above layout would remain same in the medium and large screen (because if medium screen can accomodate this layout then large screen will also have enough space to accomodate this layout).

In small and extra small screen both columns would occupy 100% width of the screen as we have not specified column sizes (small screen specific css) for smaller devices.

small screen layout bootstrap

Similarly, below code would

<div class="container">
        <div class="row">
            <div class="col-sm-3">col-sm-3</div>
            <div class="col-sm-9">col-sm-9</div>
        </div>
    </div>

have the same layout for large, medium and small screen but in extra small screen both columns would occupy 100% width of the screen.

So when we specify the column width behavior for the smaller screen, the bigger screen inherits its properties.

Views: 12459 | Post Order: 16