Bootstrap 5 Grid Examples

The Bootstrap 5 Grid System is the backbone of responsive design, allowing developers to create layouts that adapt seamlessly across different screen sizes. With its flexible grid classes, you can organize content into rows and columns, making it ideal for any project.

In this post, we’ll explore real-world examples of Bootstrap 5 grids to help you understand and implement responsive layouts in your projects.

1. Basic Grid Example

The simplest example of a grid layout consists of a single row with multiple equal-width columns.

Code Example:

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

Result:

  • Three equally sized columns.
  • Columns stack vertically on smaller screens.

2. Grid with Custom Column Widths

You can create columns of varying widths by using classes like .col-*, where * is the number of grid columns (out of 12).

Code Example:

<div class="container">
  <div class="row">
    <div class="col-4 bg-warning text-dark text-center p-3">Column 1</div>
    <div class="col-8 bg-info text-white text-center p-3">Column 2</div>
  </div>
</div>

Result:

  • Column 1 takes up 4/12 (33.33%) of the row width.
  • Column 2 takes up 8/12 (66.67%) of the row width.

3. Responsive Grid Example

Use different column sizes for various screen breakpoints to create layouts that adapt to different devices.

Code Example:

<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4 bg-primary text-white text-center p-3">Column 1</div>
    <div class="col-12 col-md-6 col-lg-4 bg-secondary text-white text-center p-3">Column 2</div>
    <div class="col-12 col-md-6 col-lg-4 bg-success text-white text-center p-3">Column 3</div>
  </div>
</div>

Explanation:

  • col-12: Full-width columns on small screens.
  • col-md-6: Two equal-width columns on medium screens (≥768px).
  • col-lg-4: Three equal-width columns on large screens (≥992px).

4. Nested Grid Example

You can nest rows and columns inside a column to create more complex layouts.

Code Example:

<div class="container">
  <div class="row">
    <div class="col bg-light p-3">
      Parent Column
      <div class="row mt-3">
        <div class="col bg-primary text-white text-center p-2">Child Column 1</div>
        <div class="col bg-secondary text-white text-center p-2">Child Column 2</div>
      </div>
    </div>
  </div>
</div>

Result:

  • A nested row inside a parent column, useful for complex UI designs.

5. Grid with Gutters

Use the g-* classes to add spacing (gutters) between columns and rows.

Code Example:

<div class="container">
  <div class="row g-3">
    <div class="col bg-warning text-dark text-center p-3">Column 1</div>
    <div class="col bg-info text-white text-center p-3">Column 2</div>
    <div class="col bg-success text-white text-center p-3">Column 3</div>
  </div>
</div>

Explanation:

  • g-3: Adds 16px gutters between columns and rows.

6. Grid Alignment Example

Align columns horizontally or vertically using alignment classes.

Horizontal Alignment:

<div class="container">
  <div class="row justify-content-center">
    <div class="col-4 bg-primary text-white text-center p-3">Centered Column</div>
  </div>
</div>

Vertical Alignment:

<div class="container">
  <div class="row align-items-center" style="height: 200px;">
    <div class="col bg-success text-white text-center">Vertically Centered</div>
  </div>
</div>

7. Full-Width Layout

Use the .container-fluid class for a full-width layout that spans the entire screen.

Code Example:

<div class="container-fluid">
  <div class="row">
    <div class="col bg-danger text-white text-center p-3">Full-Width Column</div>
  </div>
</div>

Use Case:

  • Perfect for headers, footers, or banners.

8. Grid for Complex Layouts

Bootstrap 5 allows combining different column sizes to create unique layouts.

Code Example:

<div class="container">
  <div class="row">
    <div class="col-3 bg-primary text-white text-center p-3">Sidebar</div>
    <div class="col-6 bg-secondary text-white text-center p-3">Main Content</div>
    <div class="col-3 bg-success text-white text-center p-3">Ads</div>
  </div>
</div>

Result:

  • Sidebar: 3/12 width.
  • Main Content: 6/12 width.
  • Ads: 3/12 width.

9. Grid for Hero Sections

Use the grid system to create visually appealing hero sections.

Code Example:

<div class="container">
  <div class="row align-items-center" style="height: 400px;">
    <div class="col-6 bg-primary text-white text-center p-3">
      <h1>Hero Text</h1>
    </div>
    <div class="col-6">
      <img src="https://via.placeholder.com/400" class="img-fluid" alt="Hero Image">
    </div>
  </div>
</div>

10. Grid for Footer Layouts

Create multi-column footers with the grid system.

Code Example:

<div class="container">
  <div class="row">
    <div class="col-4 bg-dark text-white text-center p-3">About Us</div>
    <div class="col-4 bg-secondary text-white text-center p-3">Quick Links</div>
    <div class="col-4 bg-info text-white text-center p-3">Contact</div>
  </div>
</div>

FAQs About Bootstrap 5 Grid

1. Can I customize Bootstrap’s grid?

Yes, Bootstrap’s grid can be customized using custom classes, Sass variables, or overriding the default CSS.

2. What’s the difference between .container and .container-fluid?

  • .container: Provides a fixed-width container.
  • .container-fluid: Stretches to 100% width, adapting to the screen size.

3. How do I troubleshoot grid issues?

  • Ensure you’ve added the correct classes.
  • Check for conflicting CSS styles.
  • Use browser developer tools to debug.

Conclusion

Bootstrap 5’s grid system is versatile, intuitive, and essential for building responsive web layouts. With these examples, you can implement grids for everything from simple columns to advanced layouts like dashboards and hero sections.

Leave a Comment