bootstrai responsive design - Bootstrap responsive grid for Desktop and Mobile

Bootstrap responsive grid for Desktop and Mobile

Posted on

bootstrai responsive design - 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

.

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.

bootstrap responsive design table - Bootstrap responsive grid for Desktop and Mobile

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.

Output:

Desktop Version

desktop bootstrap - Bootstrap responsive grid for Desktop and Mobile

Mobile Version

mobile bootstrap - Bootstrap responsive grid for Desktop and Mobile

Source techzoo.org