Working Bootstrap grid system across multiple devices


Grid systems are used for creating page layouts through a series of rows and columns that house your content.

Here's how the Bootstrap grid system works

  • Rows must be placed within a .container class for proper alignment and padding.
  • Use rows to create horizontal groups of columns.
  • Content should be placed within the columns, and only columns may be the immediate children of rows.
  • Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. Fewer mixins can also be used for more semantic layouts.
  • Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and the last column via negative margin on .rows.
  • Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.

Updated on: 12-Jun-2020

260 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements