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 −

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

  • Use the .themed-grid-col class to add some theming to the columns. This is not a default Bootstrap class.

  • Create a grid with equal columns using .row-cols-* classes.

  • Padding is used in columns to create gutters (gaps between column content). That padding is offset in rows using a negative margin on .rows for the first and last column.

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

Get certified by completing the course

Get Started