Bootstrap Grid System

Bootstrap's grid system is built with flexbox and allows up to 12 columns across the page.

The grid system is responsive, and the columns will re-arrange automatically depending on the screen size.

Make sure that the sum adds up to 12 or fewer (it is not required that you use all 12 available columns).

Grid Classes

The Bootstrap 5 grid system has six classes:

• .col- (extra small devices - screen width less than 576px)
• .col-sm- (small devices - screen width equal to or greater than 576px)
• .col-md- (medium devices - screen width equal to or greater than 768px)
• .col-lg- (large devices - screen width equal to or greater than 992px)
• .col-xl- (xlarge devices - screen width equal to or greater than 1200px)
• .col-xxl- (xxlarge devices - screen width equal to or greater than 1400px)

The classes above can be combined to create more dynamic and flexible layouts.

Tip: Each class scales up, so if you want to set the same widths for sm and md, you only need to specify sm.

Bootstrap three equal columns

The following example shows how to create three equal-width columns, on all devices and screen widths:

Example:
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div> </div>

Two Unequal Responsive Columns

The following example shows how to get two various-width columns starting at tablets and scaling to large extra desktops:

Example:
<div class="row"> <div class="col-sm-4">.col-sm-4</div> <div class="col-sm-8">.col-sm-8</div> </div>

Here are the keypoints of Bootstrap Grid System

1. Grid System Overview:

• The Bootstrap grid system is a flexible layout system designed to create responsive and structured web page layouts.
• It uses a series of rows and columns to layout and align content.

2. Grid Structure:

• Rows: Rows act as wrappers for columns and are used to create a horizontal group of columns. They ensure proper alignment and spacing of columns.
• Columns: Columns sit inside rows and are used to structure content. They can be divided into up to 12 units per row, which can be adjusted based on the screen size.

3. Responsive Breakpoints:

• Extra small (xs): For screens < 576px
• Small (sm): For screens ≥ 576px
• Medium (md): For screens ≥ 768px
• Large (lg): For screens ≥ 992px
• Extra large (xl): For screens ≥ 1200px
• XXL (xxl): For screens ≥ 1400px

3. Responsive Breakpoints:

• Columns are defined using classes like .col-, .col-sm-, .col-md-, .col-lg-, .col-xl-, and .col-xxl-.
• You can specify the number of columns for each breakpoint, e.g., .col-4 for 4 units out of 12 or .col-md-6 for a column that spans 6 units on medium and larger screens.

4. Offsetting Columns:

• You can use offset classes to add space before a column. For example, .offset-md-3 will add a left margin to a column that offsets it by 3 columns.

5. Alignment and Ordering:

• Vertical Alignment: .align-items-start, .align-items-center, .align-items-end
• Horizontal Alignment: .justify-content-start, .justify-content-center, .justify-content-end
• Column Ordering: Use .order- classes to change the order of columns.