Bootstrap 5 Grid basic

In Bootstrap 5, the grid system is a powerful layout tool based on a 12-column system, which helps create responsive layouts. Here’s a quick overview of how to use the grid system in Bootstrap 5:

Basic Structure of the Bootstrap Grid:

• The Bootstrap grid system uses containers, rows, and columns to layout and align content.
• A .container or .container-fluid element contains rows, and each row contains .col elements.
• The .col class provides flexible column sizing that automatically distributes remaining space across columns.

Column Custom Sizes:

• The grid system uses a 12-column layout, so you can specify how many columns a div should span using .col-{breakpoint}-{number}.
• For instance, .col-lg-4 will span 4 out of 12 columns on large screens and above.

Responsive Columns:

    Use .col-{breakpoint}-{number} to make columns responsive. For example, .col-md-6 makes the column take up half the row width on md screens and larger.

• col-xs- (Extra small, <576px)
• col-sm- (Small, ≥576px)
• col-md- (Medium, ≥768px)
• col-lg- (Large, ≥992px)
• col-xl- (Extra large, ≥1200px)
• col-xxl- (Extra extra large, ≥1400px)

Nesting Columns:

    You can nest rows and columns within columns for more complex layouts.