Bootstrap - Grid Examples

The Bootstrap 5 Grid System is a powerful tool to create responsive and flexible layouts. It divides the page into a 12-column layout and provides classes to adjust the structure across different screen sizes. Here are practical examples to help you implement Bootstrap 5 grids.

Example 1: Equal Columns

Use .col to create equal-width columns.

<!DOCTYPE html>

<head>

<title>Equal Columns</title>

</head>

<body>

<div class="col bg-primary text-white text-center">Column 1</div>

<div class="col bg-secondary text-white text-center">Column 2</div>

<div class="col bg-success text-white text-center">Column 3</div>

</div>

</body>

</html>

Output:

Three equally spaced columns regardless of screen size.

Example 2: Custom Column Sizes

Specify column sizes using .col-[number] (e.g., .col-4).

<div class="col-4 bg-danger text-white text-center">Column 1 (4)</div>

<div class="col-8 bg-warning text-dark text-center">Column 2 (8)</div>

</div>

Output:

A grid with one column taking 4/12 and another taking 8/12.

Example 3: Responsive Columns

Add breakpoints (sm, md, lg, etc.) for responsive designs.

<div class="col-12 col-sm-6 col-lg-4 bg-info text-white text-center">Column 1</div>

<div class="col-12 col-sm-6 col-lg-4 bg-light text-dark text-center">Column 2</div>

<div class="col-12 col-lg-4 bg-dark text-white text-center">Column 3</div>

</div>

Behavior:

Extra Small Screens (<576px): Columns stack vertically.

Small Screens (≥576px): Two columns in a row.

Large Screens (≥992px): Three columns in a row.

Example 4: Auto Layout Columns

Use .col-auto for columns sized by their content.

<div class="col bg-light text-dark text-center">Remaining Space</div>

</div>

Output:

Auto-sized columns for the first two items, and the remaining space taken by the last column.

Example 5: Nesting Columns

Nest grids inside a column.

<div class="col bg-success text-white text-center">Nested 1</div>

<div class="col bg-danger text-white text-center">Nested 2</div>

</div>

<div class="col-4 bg-warning text-dark text-center">Outer Column</div>

</div>

Output:

A grid with a nested two-column layout inside the first column.

Example 6: Offset Columns

Use .offset-[number] to create space before a column.

<div class="col-4 offset-4 bg-info text-white text-center">Centered Column</div>

</div>

Output:

A single column of 4/12 width centered with an offset.

Example 7: Mixed Responsive Grids

Combine multiple breakpoints for complex layouts.

<div class="col-12 col-md-6 col-lg-4 bg-primary text-white text-center">Responsive 1</div>

<div class="col-12 col-md-6 col-lg-4 bg-secondary text-white text-center">Responsive 2</div>

<div class="col-12 col-lg-4 bg-success text-white text-center">Responsive 3</div>

</div>

Behavior:

Stacks vertically on small screens.

Two columns on medium screens.

Three columns on large screens.

Example 8: Aligning Columns

Use flex alignment classes for better positioning.

<div class="col-6 bg-primary text-white text-center">Aligned Center</div>

<div class="col-6 bg-success text-white text-center">Aligned Center</div>

</div>

Output:

The two columns are vertically aligned to the center of the row.

Example 9: Gutters (Spacing Between Columns)

Adjust column spacing using .g-[number].

<div class="col bg-warning text-dark text-center">Column 1</div>

<div class="col bg-danger text-white text-center">Column 2</div>

</div>

Output:

A grid with a gap between columns.