Bootstrap 5 – Grid Medium (md) Variants – Tablet and Small Desktop Layouts

Introduction – What Is the md Grid in Bootstrap 5?

In Bootstrap 5, the md breakpoint applies to screen sizes ≥768px, which includes tablets in landscape orientation and smaller desktop monitors. It helps developers create responsive layouts that kick in after the small (sm) breakpoint and before large (lg).

In this guide, you’ll learn:

• What .col-md-* does in the grid system
• How it compares to xs and sm classes
• Examples of real-world md usage
• Best practices for layouts targeting medium devices

Bootstrap 5 md Breakpoint Overview

The md variant is especially helpful when designing layouts that should stack on small screens but become multi-column on larger displays like tablets.

Example 1 – Two-Column Layout from Medium Up

<div class="row">
  <div class="col-12 col-md-6 bg-light p-3">Left Content</div>
  <div class="col-12 col-md-6 bg-secondary text-white p-3">Right Content</div>
</div>

Explanation:

• Stacks vertically on screens <768px
• Switches to side-by-side layout starting from md (≥768px)

Example 2 – Three Equal Columns on md and Up

<div class="row">
  <div class="col-12 col-md-4 bg-warning p-3">One</div>
  <div class="col-12 col-md-4 bg-info text-white p-3">Two</div>
  <div class="col-12 col-md-4 bg-dark text-white p-3">Three</div>
</div>

Output:

• 100% stacked layout on mobile
• 3-column horizontal layout on tablets and desktops ≥768px

Example 3 – Centering Content with offset-md-*

<div class="row">
  <div class="col-md-6 offset-md-3 bg-primary text-white text-center p-4">Centered Content</div>
</div>

Explanation:

• Offset pushes the column 3 units right
• Result: centered 6-column wide content on medium+ screens

Example 4 – Reordering with order-md-*

<div class="row">
  <div class="col-md-6 order-md-2 bg-success text-white p-3">Second</div>
  <div class="col-md-6 order-md-1 bg-info text-white p-3">First</div>
</div>

Output:

• Default source order applies on small screens
• At ≥768px, columns switch positions

Example 5 – Nesting Inside md Grid

<div class="row">
  <div class="col-md-8 bg-light p-3">
    <div class="row">
      <div class="col-6 bg-warning p-2">Nested A</div>
      <div class="col-6 bg-secondary text-white p-2">Nested B</div>
    </div>
  </div>
  <div class="col-md-4 bg-dark text-white p-3">Side Column</div>
</div>

Explanation:

• Nested row appears inside the medium-sized main content
• Ideal for forms, dashboards, or feature blocks

Best Practices for md Grid Layouts

Summary – Responsive Layouts with Bootstrap 5 md

The md variant in Bootstrap 5 offers the sweet spot between mobile and large desktop layouts. It’s especially useful when designing interfaces that must adapt cleanly from stacked to grid layouts at 768px+.

Key Takeaways:

• md breakpoint starts at 768px (tablets in landscape)
• Use col-md-* for horizontal layouts that stack below md
• Supports offset-md-*, order-md-*, and responsive utilities
• Nesting and spacing should be planned for mid-sized screens

Perfect for marketing sections, dashboard cards, forms, and responsive tables.

FAQs – Bootstrap 5 Medium Grid Variants

What screen size does the md breakpoint target?
md starts at 768px (tablets in landscape and up)

Can I use col-md-* and col-lg-* together?
Yes. This enables granular control across multiple breakpoints.

What happens if I don’t define a col-md-* class?
The layout will follow lower breakpoint behavior (col-* or col-sm-*)

Is it okay to use col-md without col-12?
Yes. But using both ensures mobile stacking before md.