Bootstrap 4 Grid Examples

Welcome to The Coding College! In this tutorial, we’ll explore practical examples of Bootstrap 4’s grid system. The grid is the foundation of Bootstrap’s responsive design, enabling you to create layouts that adapt seamlessly across various screen sizes.

Bootstrap Grid Basics

The Bootstrap 4 grid system uses rows and columns to structure content. It’s based on a 12-column layout and includes five responsive breakpoints:

BreakpointClass PrefixScreen Size Range
Extra smallcol-xs-*<576px
Smallcol-sm-*≥576px and <768px
Mediumcol-md-*≥768px and <992px
Largecol-lg-*≥992px and <1200px
Extra largecol-xl-*≥1200px

Example 1: Two Equal Columns

Create two equal-width columns that adjust based on screen size:

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

Behavior:

  • Columns are equal-width by default and adjust to fit the screen.

Example 2: Specified Column Widths

You can assign specific column widths:

<div class="container">
  <div class="row">
    <div class="col-4">Column 1 (4/12)</div>
    <div class="col-8">Column 2 (8/12)</div>
  </div>
</div>

Behavior:

  • Column 1: Occupies 4/12 of the row.
  • Column 2: Occupies 8/12 of the row.

Example 3: Responsive Breakpoints

Define different column widths for various screen sizes:

<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-8">Column 2</div>
  </div>
</div>

Behavior:

  • Extra small screens (<576px): Both columns take full width (col-12).
  • Medium screens (≥768px): Each column takes half the width (col-md-6).
  • Large screens (≥992px): Column 1 takes 4/12, and Column 2 takes 8/12.

Example 4: Three Equal Columns

Here’s how to create three equally sized columns:

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

Behavior:

  • All three columns have equal width and adjust automatically.

Example 5: Nested Grids

You can nest grids inside columns:

<div class="container">
  <div class="row">
    <div class="col-8">
      Parent Column
      <div class="row">
        <div class="col-6">Nested Column 1</div>
        <div class="col-6">Nested Column 2</div>
      </div>
    </div>
    <div class="col-4">Parent Column 2</div>
  </div>
</div>

Example 6: Offset Columns

Use offsets to create spacing between columns:

<div class="container">
  <div class="row">
    <div class="col-4 offset-4">Centered Column</div>
  </div>
</div>

Behavior:

  • The column is centered by offsetting 4/12 of the row’s width on both sides.

Example 7: Auto Layout Columns

Bootstrap automatically adjusts columns to fit content:

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

Example 8: Responsive Alignment

Align columns using Bootstrap’s alignment utilities:

<div class="container">
  <div class="row align-items-center">
    <div class="col-6">Aligned Center</div>
    <div class="col-6">Aligned Center</div>
  </div>
</div>

Alignment Options:

  • align-items-start: Aligns content at the top.
  • align-items-center: Aligns content in the center.
  • align-items-end: Aligns content at the bottom.

Example 9: Full-Width Layout with container-fluid

Use container-fluid for a layout that spans the full width of the screen:

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

Example 10: Custom Gutter Spacing

Control spacing between columns using no-gutters or spacing utilities:

<div class="container">
  <div class="row no-gutters">
    <div class="col-6">Column 1 (No Space)</div>
    <div class="col-6">Column 2 (No Space)</div>
  </div>
</div>

Example 11: Card Layout with Grids

Use the grid system to create a card layout:

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="card">
        <img src="https://via.placeholder.com/300" class="card-img-top" alt="Card Image">
        <div class="card-body">
          <h5 class="card-title">Card Title</h5>
          <p class="card-text">Card content goes here.</p>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card">
        <img src="https://via.placeholder.com/300" class="card-img-top" alt="Card Image">
        <div class="card-body">
          <h5 class="card-title">Card Title</h5>
          <p class="card-text">Card content goes here.</p>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card">
        <img src="https://via.placeholder.com/300" class="card-img-top" alt="Card Image">
        <div class="card-body">
          <h5 class="card-title">Card Title</h5>
          <p class="card-text">Card content goes here.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Tips for Effective Grid Usage

  1. Mobile-First Design: Start with smaller breakpoints (xs, sm) and build up to larger screens (md, lg, xl).
  2. Combine Classes: Use multiple classes like col-md-* and col-lg-* for responsive designs.
  3. Test Responsiveness: Ensure your layouts look great on all devices by testing across different screen sizes.
  4. Use Nesting: Nest rows within columns for complex layouts.

Conclusion

The Bootstrap 4 grid system is a versatile and powerful tool for creating responsive layouts. By combining rows, columns, and breakpoints, you can build professional, adaptive designs that look great on any device.

Leave a Comment