Bootstrap Grid - The secret of responsive design

 

If you are a web developer, you want your websites to be responsive so that it fits on all devices. You can do it in many ways using CSS. But, there is a more convenient way of making your website responsive and it is Bootstrap framework.

You might know about the CSS grid. There, you have to specify the percentages of the width. But, if you use Bootstrap, then there is not such a huge task. So, be ready and discover the secret of making your website responsive with Bootstrap grid.

Grid system:

The grid system allows 12 columns on a web page. What does it mean? It means that you have control over a div width on different screens. If you want to have two divs on your web page in the same row, each div will contain 6 columns. You can change the widths to be unequal as well. Like, if you want two divs of 4-8 ratio, you can do it as well. If it is not clear to you yet, check the image given above for more clear understanding. 

Basic structure:

You might have many doubts regarding what that col-sm-6, col-sm-8, etc are in the above image. Let me clear your doubt. You need to understand some basic structure for using Bootstrap Grid. These are the following points you should remember while using Bootstrap Grid-

1. Declare a <div> and add a class .container-fluid or .container to the <div>.

2. Declare another <div> and add a class .row to the <div>. If you want to have more than a row, you have to declare the same amount of <div> having class .row.

3. Declare the divs you want to have in the grid and add classes col-md-* or col-sm-* or col-xs-* or col-lg-* whichever you want to apply.

I am adding an example to have a clear overview of the basic structure.

Classes for different size screens:

You have learned that you have to use some classes like col-md-*, col-sm-*, etc. But, you don't know what those sm, md, lg and xs are and when to use them. Let's discuss the class prefixes for different size devices.

1. xs:  

• It is suitable for phones.
• It works for devices with a width of less than 768px .

2. sm:  

• It is suitable for Tablets.
• It works in devices with a width equal to or greater than 768px.

3. md: 

• It is suitable for small laptops.
• It works in devices with a width equal to or greater than 992px.

4. lg:

• It is suitable for laptops and desktops.
• It works in devices with a width equal to or greater than 1200px.

Some examples of Grid:

Three equal width columns:

 

I am showing how you can create three equal width columns. I am adding some classes so that the three divs remain equal on all devices with equal or greater than 768px. But, it will stack on small size devices like phones. Check the following example. Resize the screen to understand how it works.

See the Pen dyMRVRV by KAMAL DAS (@daskamal)on CodePen.

Three unequal width columns:

You can create three unequal width columns as well. I am adding some classes so that the three divs have the width with a ratio of 3-6-3 on all devices with equal or greater than 768px. But, it will stack on small size devices like phones. Check the following example given below. Resize the screen to understand how it works.

See the Pen Three unequal columns by KAMAL DAS (@daskamal)on CodePen.

All devices:

To understand the power of the Bootstrap grid in creating a responsive design, you must play with the following example. Check the result of the code resizing the result screen.

See the Pen All devices by KAMAL DAS (@daskamal)on CodePen.

Changing the order:

You can change the order of the divs with the bootstrap grid system. If you have added two divs but you want that when the device size is small, the order of the divs should change. You can do it using Bootstrap .order classes. If you want that your divs change the order in medium-sized screens then add .order-md-* to the divs and whichever div you want to  first add a smaller  number in the place of *. I am giving two examples here. In the first one, I have used two divs and in the second, I have used three divs. So, play with the result window to understand the effect in the following examples.

See the Pen change column order by KAMAL DAS (@daskamal)on CodePen.

See the Pen vYGZaBV by KAMAL DAS (@daskamal)on CodePen.

Congratulations on discovering the secret of responsive design with the Bootstrap grid. If you understand all these things clearly, then start coding and play with this awesome tool of responsive design. But, if you have any doubts or facing any issue, let me know through your comments. You can comment on what are the topics you want to be published next. Best wishes.

Happy coding 😄