1. Understanding the Bootstrap Grid System

• The grid system uses containers, rows, and columns to structure content.

• It is fully responsive, adjusting automatically for different screen sizes.

• Uses flexbox for alignment and positioning.

• Supports different column sizes for various devices (xs, sm, md, lg, xl, xxl).

2. Setting Up Bootstrap Grid

Step 1: Include Bootstrap in Your Project

To use the Bootstrap grid, first include Bootstrap in your HTML file.

👉 Using Bootstrap CDN:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

Step 2: Create a Container

Bootstrap provides two types of containers:

1. .container – Fixed width container (adjusts at breakpoints).

2. .container-fluid – Full-width container (always spans 100% width).

👉 Example:

<div class="container">
    <h2>Fixed Container</h2>
</div>

<div class="container-fluid">
    <h2>Full-Width Container</h2>
</div>

Step 3: Add Rows and Columns

• The .row class is used to create a row.

• The .col classes define column width based on screen size.

👉 Example: Basic Grid Layout (12-Column System)

<div class="container">
    <div class="row">
        <div class="col-md-4 bg-primary text-white p-3">Column 1</div>
        <div class="col-md-4 bg-success text-white p-3">Column 2</div>
        <div class="col-md-4 bg-danger text-white p-3">Column 3</div>
    </div>
</div>

✅ Explanation:

• .col-md-4 creates 3 equal columns on medium (md) screens and above.

• Bootstrap automatically stacks them on smaller screens.

<div class="container">
    <div class="row">
        <div class="col-sm-6 col-md-4 col-lg-3 bg-warning p-3">Responsive Column</div>
        <div class="col-sm-6 col-md-4 col-lg-3 bg-info p-3">Responsive Column</div>
        <div class="col-sm-6 col-md-4 col-lg-3 bg-secondary p-3">Responsive Column</div>
        <div class="col-sm-6 col-md-4 col-lg-3 bg-dark text-white p-3">Responsive Column</div>
    </div>
</div>

✅ Explanation:

• .col-md-4 creates 3 equal columns on medium (md) screens and above.

• Bootstrap automatically stacks them on smaller screens.

Step 4: Responsive Column Layouts

You can define different column widths for different screen sizes.

👉 Example: Responsive Columns

<div class="container">
    <div class="row">
        <div class="col-sm-6 col-md-4 col-lg-3 bg-warning p-3">Responsive Column</div>
        <div class="col-sm-6 col-md-4 col-lg-3 bg-info p-3">Responsive Column</div>
        <div class="col-sm-6 col-md-4 col-lg-3 bg-secondary p-3">Responsive Column</div>
        <div class="col-sm-6 col-md-4 col-lg-3 bg-dark text-white p-3">Responsive Column</div>
    </div>
</div>

✅ Explanation:

• .col-sm-6 – 2 columns on small screens.

• .col-md-4 – 3 columns on medium screens.

• .col-lg-3 – 4 columns on large screens.

Step 5: Nesting Columns (Grid Inside a Grid)

You can nest grids inside a column to create more complex layouts.

👉 Example: Nested Columns

<div class="container">
    <div class="row">
        <div class="col-md-6 bg-primary p-3">
            Parent Column
            <div class="row">
                <div class="col-6 bg-light p-2">Nested Column 1</div>
                <div class="col-6 bg-dark text-white p-2">Nested Column 2</div>
            </div>
        </div>
        <div class="col-md-6 bg-success p-3">Another Column</div>
    </div>
</div>

Step 6: Offsetting Columns

Offsets move columns to create spacing without using empty columns.

👉 Example: Offsetting a Column

<div class="container">
    <div class="row">
        <div class="col-md-4 offset-md-2 bg-info text-white p-3">Offset Column</div>
    </div>
</div>