Working of Bootstrap Grid System

Working of Bootstrap Grid System

Grid systems are used to create page layouts by arranging your information in a sequence of rows and columns. The Bootstrap grid system operates as follows:

• For appropriate alignment and padding, rows must be placed within a.container class.
• Create horizontal groups of columns by using rows.
• Only columns may be the direct children of rows, and content should be placed within the columns.
• For fast creating grid layouts, predefined grid classes such as.row and.col-xs-4 are available. For more semantic layouts, LESS mixins might be used.
• Padding in columns creates gutters (gaps between column content). Negative margin on.rows is used to offset the padding in rows for the first and last columns.
• Grid columns are generated by defining the amount of available columns you want to span out of a total of twelve. Three equal columns, for example, would require three. col-xs-4.

Media Queries

The word "media query" is a sophisticated way of saying "conditional CSS rule." It simply adds CSS to a page based on a set of circumstances. The style is applied if certain conditions are met.

You may move, show, and hide content based on the viewport size with Bootstrap's Media Queries. A device specification and a size rule are the two pieces of a media query.

OUTPUT :-1

OUTPUT :-2

Responsive column resets

With the four levels of grids available, you're bound to run into situations where the columns don't clear properly at particular breakpoints because one is taller than the other. Use a combination of a class to fix this. clearfix and the responsive utility classes are two examples of this.

OUTPUT :

Offset Columns

For more specific layouts, offsets are a handy feature. They can be used to push columns over for more space, or they can be used to push columns over for more space (for example). Offsets are not supported by the.col-xs = * classes, but they can be easily duplicated by using an empty cell.

Employ the.col-md-offset-* classes to use offsets on large displays. These classes extend a column's left margin by * columns, where * is a number between 1 and 11.

OUTPUT :

Nesting columns

Add a new to nest your content with the default grid. Within an existing.col-md-* column, there is a row and a set of.col-md-* columns. A group of columns that adds up to 12 should be included in nested rows.

OUTPUT :

Column Ordering

Another useful aspect of the Bootstrap grid system is the ability to write columns in one order and display them in another. With the.col-md-push-* and.col-md-pull-* modifier classes, you may simply adjust the order of built-in grid columns, with * ranging from 1 to 11.

OUTPUT :