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
Advertisements