Bootstrap 5 Grids

Bootstrap 5 Grid System

Bootstrap 5 has a powerful, responsive grid system based on 12 columns that helps design flexible and adaptive layouts. It uses containers, rows, and columns to structure web pages.

---

1. Basic Grid Structure

A Bootstrap grid consists of:
✔ .container – Wraps the content (Fixed width or Full width).
✔ .row – Defines a row (Horizontally aligned).
✔ .col – Defines columns inside the row.

Example of a Simple Grid

<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>

✔ By default, columns are equal width and stack on smaller screens.

---

2. Containers in Bootstrap 5

Bootstrap provides three types of containers:

Example of Different Containers

<div class="container">Fixed Width Container</div>
<div class="container-fluid">Full Width Container</div>
<div class="container-lg">Large Screen Container</div>

---

3. Column Sizing

Columns are based on 12-grid layout. You can specify the column width using col-*.

<div class="container">
    <div class="row">
        <div class="col-4 bg-primary text-white">4 Columns</div>
        <div class="col-8 bg-success text-white">8 Columns</div>
    </div>
</div>

✔ The sum of columns should be 12 for a full-width row.

---

4. Responsive Grid (Breakpoints)

Bootstrap 5 includes the following breakpoints:

Example: Responsive Columns

<div class="container">
    <div class="row">
        <div class="col-sm-6 col-md-4 col-lg-3 bg-info">Responsive Column</div>
        <div class="col-sm-6 col-md-8 col-lg-9 bg-warning">Another Column</div>
    </div>
</div>

✔ On small screens (<576px), each column takes full width.
✔ On medium screens (≥768px), the first column takes 4, the second takes 8.

---

5. Nesting Columns

Columns can be nested inside other columns.

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

✔ Nesting is useful for complex layouts.

---

6. Column Offsetting

Use .offset-* to create space before a column.

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

✔ Offsets help center or push content to the right.

---

7. Column Ordering

Use .order-* to change column order.

<div class="container">
    <div class="row">
        <div class="col-md-4 order-md-2 bg-primary">Second</div>
        <div class="col-md-4 order-md-1 bg-success">First</div>
        <div class="col-md-4 order-md-3 bg-warning">Third</div>
    </div>
</div>

✔ Column order changes at md (768px) and above.

---

8. Auto Layout Columns

If no column size is defined, Bootstrap automatically distributes space evenly.

<div class="container">
    <div class="row">
        <div class="col bg-info">Auto Column 1</div>
        <div class="col bg-success">Auto Column 2</div>
        <div class="col bg-danger">Auto Column 3</div>
    </div>
</div>

✔ Columns adjust automatically to fit the row.

---

9. Equal Height Columns

Use .align-items-stretch in .row to ensure all columns have the same height.

<div class="container">
    <div class="row align-items-stretch">
        <div class="col bg-primary p-5">Tall Column</div>
        <div class="col bg-secondary p-2">Short Column</div>
    </div>
</div>

---

10. Grid Alignment

Use .align-items-* to align items inside a row.

<div class="container">
    <div class="row align-items-center" style="height: 200px;">
        <div class="col bg-primary">Centered Column</div>
    </div>
</div>

---

Conclusion

✔ Bootstrap 5 Grids are based on a 12-column system.
✔ Use containers (.container, .container-fluid) to wrap rows.
✔ Use breakpoints (.col-sm-*, .col-md-*, etc.) for responsive layouts.
✔ Customize layouts using offsets, ordering, nesting, and alignment.

Want more details? Let me know!

Share on Google Plus

About It E Research

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.