Understanding the grid system

Of late, grid systems have been extensively used in web-development workflows. Grid systems aim to streamline the HTML markup process by providing a standard set of dimensions and display styles for the commonly used UI elements. The following screenshot shows a grid system:

Bootstrap has a default 12-column grid system that is available as a responsive, fluid, and fixed layout. It comes with a complete set of predefined classes that meets nearly all your UI styling needs.

Some of the most commonly used classes are mentioned in the following table:

Class	Description
.col-md-*	This is for column widths that are applied to a content block for medium screen devices such as desktops with resolutions greater than or equal to 992 px wide.
.col-xs-*	This is for small devices with a width of 768 px or less.
.col-sm-*	This is for tablet devices with a size of 768 px or more.
.col-lg-*	This is for large devices with sizes greater than or equal to 1200...