Responsive Layouts with Bootstrap 5

This very blog is built with Bootstrap 5 and works on both desktop and mobile. Here's how the responsive patterns work - with examples you can copy.

Bootstrap Breakpoints

Pattern 1: Responsive Grid

Three cards on desktop, one per row on mobile:

<div class="row g-4">
  <div class="col-md-6 col-lg-4">Card 1</div>
  <div class="col-md-6 col-lg-4">Card 2</div>
  <div class="col-md-6 col-lg-4">Card 3</div>
</div>

• Mobile: full width (12 columns each)
• Tablet: 2 per row (6 columns each)
• Desktop: 3 per row (4 columns each)

Pattern 2: Collapsible Navbar

Horizontal menu on desktop, hamburger on mobile:

<nav class="navbar navbar-expand-lg">
  <div class="container">
    <a class="navbar-brand site-domain" href="#">Logo</a>
    <button class="navbar-toggler" type="button"
      data-bs-toggle="collapse" data-bs-target="#nav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="nav">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
      </ul>
    </div>
  </div>
</nav>

navbar-expand-lg means: collapse below 992px, expand above.

Pattern 3: Two-Column Detail Page

Article + sidebar on desktop, stacked on mobile:

<div class="row">
  <div class="col-lg-8">
    <!-- Article content -->
  </div>
  <div class="col-lg-4">
    <!-- Sidebar (sticky on desktop) -->
  </div>
</div>

Pattern 4: Show/Hide by Breakpoint

<!-- Only visible on desktop -->
<div class="d-none d-lg-block">Desktop sidebar</div>

<!-- Only visible on mobile -->
<div class="d-lg-none">Mobile menu</div>

Pattern 5: Responsive Typography

<h1 class="display-5">Large on desktop</h1>

<!-- Custom: smaller hero on mobile -->
@media (max-width: 767.98px) {
  .hero-section { padding: 2.5rem 0; }
  .hero-section h1 { font-size: 1.75rem; }
}

Testing Checklist

1. Resize browser from 320px to 1920px
2. Check navbar collapse/expand at breakpoint
3. Verify images don't overflow containers
4. Test on a real phone (not just DevTools)
5. Check touch targets are at least 44?44px

Mobile-first doesn't mean mobile-only. Design for the smallest screen, then enhance for larger ones.