Bootstrap Grid Examples

Bootstrap 5 Grid Examples

Below are several examples of common grid layouts using Bootstrap 5. These demonstrate how to use column classes for different screen sizes and scenarios. Remember, Bootstrap’s grid is mobile-first, meaning styles for smaller breakpoints apply to larger ones unless overridden.

Three Equal Columns

.col-md-4 | .col-md-4 | .col-md-4
(Each takes 1/3 width on medium screens and up)

This example shows three equal-width columns starting at medium devices (tablets, ≥768px) and scaling to larger desktops. On small and extra-small screens, the columns will stack vertically.

<div class="container mt-3">
  <div class="row">
    <div class="col-md-4" style="background-color: #f8f9fa; border: 1px solid #dee2e6; padding: 1rem;">
      .col-md-4
    </div>
    <div class="col-md-4" style="background-color: #e9ecef; border: 1px solid #dee2e6; padding: 1rem;">
      .col-md-4
    </div>
    <div class="col-md-4" style="background-color: #f8f9fa; border: 1px solid #dee2e6; padding: 1rem;">
      .col-md-4
    </div>
  </div>
</div>

Three Unequal Columns

.col-md-3 | .col-md-6 | .col-md-3
(25% | 50% | 25% on medium screens and up)

This example demonstrates three columns with varying widths, active from medium devices upwards.

<div class="container mt-3">
  <div class="row">
    <div class="col-md-3" style="background-color: #f8f9fa; border: 1px solid #dee2e6; padding: 1rem;">
      .col-md-3
    </div>
    <div class="col-md-6" style="background-color: #e9ecef; border: 1px solid #dee2e6; padding: 1rem;">
      .col-md-6
    </div>
    <div class="col-md-3" style="background-color: #f8f9fa; border: 1px solid #dee2e6; padding: 1rem;">
      .col-md-3
    </div>
  </div>
</div>

Two Unequal Columns

.col-sm-4 | .col-sm-8
(1/3 | 2/3 on small screens and up)

Here, two columns with different widths start from small devices (≥576px).

<div class="container mt-3">
  <div class="row">
    <div class="col-sm-4" style="background-color: #f8f9fa; border: 1px solid #dee2e6; padding: 1rem;">
      .col-sm-4
    </div>
    <div class="col-sm-8" style="background-color: #e9ecef; border: 1px solid #dee2e6; padding: 1rem;">
      .col-sm-8
    </div>
  </div>
</div>

Nesting Columns

You can nest rows and columns within an existing column to create more complex layouts. Remember that nested rows also use the 12-column system within their parent column.

<div class="container mt-3">
  <div class="row">
    <div class="col-sm-8" style="background-color: #f8f9fa; border: 1px solid #dee2e6; padding: 1rem;">
      .col-sm-8 (Main)
      <div class="row mt-2">
        <div class="col-6" style="background-color: #d1e7dd; border: 1px solid #a3cfbb; padding: .5rem;">
          .col-6 (Nested)
        </div>
        <div class="col-6" style="background-color: #cff4fc; border: 1px solid #9eeaf9; padding: .5rem;">
          .col-6 (Nested)
        </div>
      </div>
    </div>
    <div class="col-sm-4" style="background-color: #e9ecef; border: 1px solid #dee2e6; padding: 1rem;">
      .col-sm-4 (Sidebar)
    </div>
  </div>
</div>

Mixed: Mobile, Tablet, and Desktop

Combine column classes for different breakpoints to create truly adaptive layouts. For example, a column might be full-width on mobile, half-width on tablets, and one-third width on desktops.

Tip: Each class scales up. If you want .col-12 on extra-small, .col-sm-6 on small, and .col-md-4 on medium, these will apply. For lg and above, .col-md-4 will persist unless overridden by .col-lg-* or .col-xl-*.

<div class="container mt-3">
  <!-- Example Row 1 -->
  <div class="row mb-3">
    <div class="col-12 col-md-8" style="background-color: #f8f9fa; border: 1px solid #dee2e6; padding: 1rem;">
      .col-12 .col-md-8 (Full width on xs/sm, 8/12 on md+)
    </div>
    <div class="col-6 col-md-4" style="background-color: #e9ecef; border: 1px solid #dee2e6; padding: 1rem;">
      .col-6 .col-md-4 (Half width on xs/sm, 4/12 on md+)
    </div>
  </div>
  <!-- Example Row 2 -->
  <div class="row mb-3">
    <div class="col-12 col-sm-6 col-lg-3" style="background-color: #f8f9fa; border: 1px solid #dee2e6; padding: 1rem;">
      .col-12 .col-sm-6 .col-lg-3
    </div>
    <div class="col-12 col-sm-6 col-lg-3" style="background-color: #e9ecef; border: 1px solid #dee2e6; padding: 1rem;">
      .col-12 .col-sm-6 .col-lg-3
    </div>
    <div class="col-12 col-sm-6 col-lg-3" style="background-color: #f8f9fa; border: 1px solid #dee2e6; padding: 1rem;">
      .col-12 .col-sm-6 .col-lg-3
    </div>
    <div class="col-12 col-sm-6 col-lg-3" style="background-color: #e9ecef; border: 1px solid #dee2e6; padding: 1rem;">
      .col-12 .col-sm-6 .col-lg-3
    </div>
  </div>
</div>

Note: Always ensure the sum of column units in a row for a given breakpoint doesn’t exceed 12 if you want them on the same line. Otherwise, they will wrap.

Clearing Floats / Responsive Wrapping (Row Column Breaks)

In Bootstrap 5, flexbox handles much of the wrapping behavior automatically. However, if you have columns of varying heights and want to ensure consistent wrapping, you can force columns to break to a new line at specific breakpoints using a width: 100% utility element or by using row columns (.row-cols-*). The old .clearfix visible-xs approach is deprecated. Use display utilities or row column classes.

Example using a full-width div to force a break after two columns on xs screens, but allowing three on sm and up:

<div class="container mt-3">
  <div class="row">
    <div class="col-6 col-sm-4" style="background-color: #f8f9fa; border: 1px solid #dee2e6; padding: 1rem;">Column 1</div>
    <div class="col-6 col-sm-4" style="background-color: #e9ecef; border: 1px solid #dee2e6; padding: 1rem;">Column 2</div>

    <!-- Force next columns to break to new line at xs breakpoint -->
    <div class="w-100 d-block d-sm-none"></div>

    <div class="col-6 col-sm-4" style="background-color: #f8f9fa; border: 1px solid #dee2e6; padding: 1rem;">Column 3</div>
    <div class="col-6 col-sm-4 d-none d-sm-block" style="background-color: #e9ecef; border: 1px solid #dee2e6; padding: 1rem;">Column 4 (hidden on xs)</div>
  </div>
</div>

<!-- Alternative using row-cols for consistent items per row -->
<div class="container mt-3">
  <div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 g-3">
    <div class="col" style="background-color: #f0f0f0; padding: 1rem; border: 1px solid #ccc;">Item 1</div>
    <div class="col" style="background-color: #f0f0f0; padding: 1rem; border: 1px solid #ccc;">Item 2</div>
    <div class="col" style="background-color: #f0f0f0; padding: 1rem; border: 1px solid #ccc;">Item 3</div>
    <div class="col" style="background-color: #f0f0f0; padding: 1rem; border: 1px solid #ccc;">Item 4</div>
    <div class="col" style="background-color: #f0f0f0; padding: 1rem; border: 1px solid #ccc;">Item 5</div>
    <div class="col" style="background-color: #f0f0f0; padding: 1rem; border: 1px solid #ccc;">Item 6</div>
  </div>
</div>

Offsetting Columns

Move columns to the right using .offset-* classes. For example, .offset-md-2 will shift a column two units to the right on medium screens and up by adding a left margin.

<div class="container mt-3">
  <div class="row">
    <div class="col-md-4" style="background-color: #f8f9fa; border: 1px solid #dee2e6; padding: 1rem;">.col-md-4</div>
    <div class="col-md-4 offset-md-2" style="background-color: #e9ecef; border: 1px solid #dee2e6; padding: 1rem;">.col-md-4 .offset-md-2</div>
  </div>
  <div class="row mt-3">
    <div class="col-sm-5 col-md-6" style="background-color: #f8f9fa; border: 1px solid #dee2e6; padding: 1rem;">
      .col-sm-5 .col-md-6
    </div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0" style="background-color: #e9ecef; border: 1px solid #dee2e6; padding: 1rem;">
      .col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0 (Offset on sm, reset on md)
    </div>
  </div>
</div>

Reordering Columns (Push and Pull)

Change the visual order of grid columns using .order-* classes. These classes allow you to specify the order independently of their source order in the HTML. For example, .order-md-2 sets the order for medium screens, while .order-1 sets it for all screens. Use .order-first or .order-last for quick reordering.

<div class="container mt-3">
  <div class="row">
    <div class="col-md-8 order-md-2" style="background-color: #f8f9fa; border: 1px solid #dee2e6; padding: 1rem;">
      First in HTML, Second visually on MD+ (.col-md-8 .order-md-2)
    </div>
    <div class="col-md-4 order-md-1" style="background-color: #e9ecef; border: 1px solid #dee2e6; padding: 1rem;">
      Second in HTML, First visually on MD+ (.col-md-4 .order-md-1)
    </div>
  </div>
</div>

Application Scenario: A news article page where, on desktop, an advertisement sidebar appears first visually (order-md-1), but in the HTML source, the main article content appears first for better SEO and accessibility (order-md-2).