Bootstrap - Grid Demo


What is a Grid?

In graphic design, a grid is a structure (usually two-dimensional) made up of a series of intersecting straight (vertical, horizontal) lines used to structure the content. It is widely used to design layout and content structure in print design. In web design, it is a very effective method to create a consistent layout rapidly and effectively using HTML and CSS.

Working of Bootstrap Grid System

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. LESS 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.

Example Description Download link
Grids This example indicates about grid structure in Bootstrap. Download

Useful Video Courses


Bootstrap Online Training

26 Lectures 2 hours

Anadi Sharma


Bootstrap 4 Responsive Web Development

54 Lectures 4.5 hours

Frahaan Hussain


Bootstrap By Building Projects - Includes Bootstrap 4


161 Lectures 14.5 hours

Eduonix Learning Solutions


Responsive E Commerce Website Designing Without Bootstrap

20 Lectures 4 hours

Azaz Patel


Bootstrap 4 for Tutorials

15 Lectures 1.5 hours

Muhammad Ismail


Complete Bootstrap 5 Course From Scratch With 3 Projects

62 Lectures 8 hours

Yossef Ayman Zedan