Hackforge Academy

Explanation

The Bootstrap Grid System is a flexible layout system used to create responsive web pages. It is based on a 12-column layout, allowing developers to divide a page into equal or custom-sized columns that automatically adjust based on screen size.

Code:

Explanation

Bootstrap Grid Components: • .container or .container-fluid - Wraps the grid. • .row - Creates a horizontal row. • .col - Creates equal-width columns. • .col-* - Creates fixed-width columns. The total width of columns in a row should not exceed 12.

Code:

<div class="container">
    <div class="row">
        <div class="col">Column 1</div>
        <div class="col">Column 2</div>
        <div class="col">Column 3</div>
    </div>
</div>

Explanation

Bootstrap provides responsive breakpoints to control layouts on different devices: • col-sm-* (≥576px) • col-md-* (≥768px) • col-lg-* (≥992px) • col-xl-* (≥1200px) • col-xxl-* (≥1400px) These classes help create layouts that adapt to mobile, tablet, laptop, and desktop screens.

Code:

<div class="container">
    <div class="row">
        <div class="col-12 col-md-6 col-lg-4">Column 1</div>
        <div class="col-12 col-md-6 col-lg-4">Column 2</div>
        <div class="col-12 col-lg-4">Column 3</div>
    </div>
</div>

Explanation

Columns can have different widths by assigning specific column sizes. Since Bootstrap uses a 12-column grid, you can combine different column widths such as 3+9, 4+8, or 6+6 depending on your layout requirements.

Code:

<div class="container">
    <div class="row">
        <div class="col-3 bg-primary text-white">25%</div>
        <div class="col-9 bg-secondary text-white">75%</div>
    </div>
</div>

Explanation

Bootstrap also provides utility classes for aligning and spacing grid items. You can center columns, change their order, add gaps, and control vertical alignment without writing custom CSS.

Code:

<div class="container">
    <div class="row justify-explanation-center align-items-center g-3" style="height:200px;">
        <div class="col-4 bg-success text-white">Box 1</div>
        <div class="col-4 bg-warning">Box 2</div>
    </div>
</div>