Bootstrap responsive grid for Desktop and Mobile

The Bootstrap grid layout system is simple to use, it provides style classes that can be used to create different kinds of grid layout, ranging from one to twelve columns and with support for responsive layouts (where the layout of the grid changes based on the width of the screen, allowing the same content to be laid out on mobile and desktop devices). With the new Bootstrap 3 version, it design with the “mobile first” approach so you don’t need to include a separate css to support mobile instead Mobile first styles can be found throughout the entire library.

To ensure proper rendering and touch zooming, add the viewport meta tag to your <head>.

You can disable zooming capabilities on mobile devices by adding user-scalable=no to the viewport meta tag.

Creating Responsive Grids

The main use for responsive grids is to allow mobile devices and desktops to display the same content, taking advantage of whatever screen space is available. To create a responsive grid, use the col-* class on individual cells with one of the classes shown in Table below.

When the width of the screen is less than the class supports, the cells in the grid row are placed vertically rather than horizontally. Following is a html code to demonstrate the responsive grid.


Desktop Version

Mobile Version

About the Author

has written 69 posts.

I Love Coding, Analyzing, Designing and doing it the right way. I am obsessed about learn anything new daily and sharing what I have learn each Day. This Blog is journey of my Zeal, going through step by step to the mountain of desire to become prefect. Google Wanna Hire me ?

Copyright © 2020 All rights reserved.
Proudly powered by WordPress. Developed by 7Tech Solutions