Bootstrap Grid System Example

Stacked to horizontal – In stacked to the horizontal grid system, the grid columns are stacked on top of each other on extra small devices and becomes horizontal (side by side) on large screen devices.

Note: The sum of the number of columns you span should not exceed more than 12.

Example

In this example, the Bootstrap grid layout is divided into two columns, which means each column obtains 50% of the screen’s width. But in extra small devices, the columns are stacked on top of each other and obtain full width of the screen.

Example:

Output

Nested Columns –You can also create the nested columns, which means column inside the column.

Example

Output

No Gutter – The gutters are the gap between the column and content. Bootstrap 4 offers a predefined class to remove gutter. Add .no-gutter class along with the .row class to remove extra space.

Example

Output

Equal Height – If one column has more content or has more height from the rest of the columns, then all other columns obtain the same height as the larger column. This is because of CSS flexbox property.

Example

Output

Row Cols – Bootstrap 4 allows you to decide how many columns will appear in a row irrespective of the number of columns present in a row. For this, add .row-cols-*  class along with the .row class to the <div> element.

Example

Output

Pin It on Pinterest

Share This