O'Reilly logo

Bootstrap Essentials by Snig Bhaumik

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

The grid system

One of the basic thumb rule of designing a responsive website is to get rid of traditional HTML tables as far as possible and use fluid div elements instead. Bootstrap offers very strong framework of grid system with extensive use of div elements which is dynamically compatible with all the devices and screens currently available in the market.

Basic architecture of the grid system of Bootstrap is that the screen is horizontally divided into maximum 12 columns (logically). And Bootstrap has provided classes to create each combination of columns – for each device sizes. The following matrix illustrates this:

Class Names

Description

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1

Classes to use to consume one column in the corresponding ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required