DEV Community

Sakshi
Sakshi

Posted on

Responsive Design With Bootstrap 5: Tips That Actually Make a Difference

#bootstrap #css #webdev #frontend

Bootstrap 5's responsive system is more capable than most developers use. Everyone knows col-md-6. Fewer people know the patterns that make the difference between a layout that works on mobile and one that actually feels designed for mobile. Here's what I've learned building responsive dashboards and landing pages with Bootstrap 5.3.

Stop Using DevTools as Your Only Mobile Test

This is the most important point and it's not about Bootstrap at all. DevTools device simulation is not a real mobile test. It simulates viewport size and touch events. It does not simulate:

  • Slower CPU (most mobile devices render significantly slower than your development machine)
  • Real network conditions
  • iOS Safari's specific quirks with viewport units and scroll behavior
  • Android Chrome's address bar resizing the viewport on scroll
  • Actual touch target accuracy on a glass screen

Test on a real device. A budget Android phone under $100 is a better test device than DevTools because it shows you real performance problems, not just layout ones.

I found a Bootstrap layout issue on a client project that DevTools showed as perfect — on a real iPhone the navbar toggler area was too small to tap accurately. Not because the button was small — the tap target was fine. But the icon inside it was positioned in a way that the effective tap area was 20px × 20px on a real screen. Six hours to find because we weren't testing on a real device.

Test on real devices early and often.

Use the Right Container for the Right Context

Bootstrap 5 has six container variants and most developers only use one.

<!-- Fixed max-width at each breakpoint — general page layouts -->
<div class="container">...</div>

<!-- Full width always — dashboard main content areas -->
<div class="container-fluid">...</div>

<!-- Full width below sm, fixed above — narrow mobile layouts -->
<div class="container-sm">...</div>

<!-- Full width below md, fixed above — most landing pages -->
<div class="container-md">...</div>

<!-- Full width below lg, fixed above — tablets fill screen -->
<div class="container-lg">...</div>

<!-- Full width below xl, fixed above — large screen optimization -->
<div class="container-xl">...</div>

<!-- Full width below xxl, fixed above — very large screens -->
<div class="container-xxl">...</div>
Enter fullscreen mode Exit fullscreen mode

The pattern I use most for admin dashboards: container-fluid inside the main content area so the dashboard fills the screen, container or container-xl for landing page sections so content has readable line length on large monitors.

For landing pages — container-xl is often better than container on large monitors. container maxes out at 1140px. container-xl maxes at 1320px. On a 1440px monitor — container looks narrow. container-xl uses the screen better.

Master the col-auto Pattern

col-auto takes only as much width as its content needs. col fills remaining space. This combination solves a huge number of layout problems without custom CSS.

<!-- Stat card header — icon auto width, title fills -->
<div class="d-flex align-items-center gap-3">
  <div class="col-auto">
    <div class="stat-icon bg-primary-subtle rounded-3 p-3">
      <i class="bx bx-dollar text-primary fs-4"></i>
    </div>
  </div>
  <div class="col">
    <div class="text-muted small mb-1">Monthly Revenue</div>
    <div class="h4 fw-bold mb-0">$48,295</div>
  </div>
  <div class="col-auto">
    <span class="badge bg-success-subtle text-success">+12%</span>
  </div>
</div>

<!-- Table row with actions — content fills, actions auto width -->
<div class="row align-items-center">
  <div class="col">
    <div class="fw-semibold">User Name</div>
    <div class="text-muted small">user@email.com</div>
  </div>
  <div class="col-auto">
    <div class="d-flex gap-2">
      <button class="btn btn-sm btn-outline-primary">Edit</button>
      <button class="btn btn-sm btn-outline-danger">Delete</button>
    </div>
  </div>
</div>

<!-- Page header — title fills, button auto width -->
<div class="row align-items-center mb-4">
  <div class="col">
    <h1 class="h4 mb-1">Users</h1>
    <p class="text-muted small mb-0">Manage all users</p>
  </div>
  <div class="col-auto">
    <button class="btn btn-primary">Add User</button>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

This pattern appears hundreds of times in a production dashboard. Learning it eliminates a huge amount of custom flexbox CSS.

Responsive Typography With fs- Utilities

Bootstrap 5 ships fs-1 through fs-6 for font sizes. But responsive typography — larger text on desktop, smaller on mobile — requires combining these with display utilities or SCSS.

// Responsive heading sizes via SCSS
.hero-title {
  font-size: 2rem; // mobile

  @include media-breakpoint-up(md) {
    font-size: 2.5rem; // tablet
  }

  @include media-breakpoint-up(lg) {
    font-size: 3.5rem; // desktop
  }
}
Enter fullscreen mode Exit fullscreen mode

Or add responsive display utilities via SCSS:

// Add responsive display utilities to your custom SCSS
@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
    @for $i from 1 through 6 {
      .display#{$infix}-#{$i} {
        font-size: map-get($display-font-sizes, $i) !important;
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Now display-6 display-md-5 display-lg-4 works — different display size per breakpoint.

Order Utilities for Mobile-First Layouts

Visual order on desktop often differs from logical order for mobile. The order- utilities handle this without changing HTML structure — important for accessibility where screen readers follow DOM order.

<!-- Mobile: image first (visually engaging), text second -->
<!-- Desktop: text first (left column), image second (right column) -->
<div class="row align-items-center g-5">
  <div class="col-12 col-lg-6 order-2 order-lg-1">
    <!-- Text content — second in DOM, first visually on desktop -->
    <h2>Feature Headline</h2>
    <p>Feature description</p>
  </div>
  <div class="col-12 col-lg-6 order-1 order-lg-2">
    <!-- Image — first in DOM, second visually on desktop -->
    <img src="feature.jpg" class="img-fluid rounded-3" alt="Feature">
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Screen reader reads text first (follows DOM order). Mobile shows image first (visually engaging). Desktop shows text on left, image on right. All three satisfied without JavaScript.

The Stack Pattern for Mobile Navigation

Dashboard sidebars need to collapse on mobile. The Bootstrap offcanvas component handles this better than the traditional show/hide approach.

<!-- Mobile navbar with offcanvas sidebar trigger -->
<nav class="navbar bg-white border-bottom d-lg-none px-3 py-2">
  <button class="btn btn-link p-0 text-dark"
          data-bs-toggle="offcanvas"
          data-bs-target="#mobileSidebar">
    <i class="bx bx-menu fs-4"></i>
  </button>
  <a class="navbar-brand fw-bold text-primary mb-0" href="#">
    Dashboard
  </a>
  <button class="btn btn-link p-0 text-dark position-relative">
    <i class="bx bx-bell fs-5"></i>
    <span class="position-absolute top-0 start-100
                 translate-middle badge rounded-pill bg-danger"
          style="font-size:9px;">3</span>
  </button>
</nav>

<!-- Offcanvas sidebar for mobile -->
<div class="offcanvas offcanvas-start" id="mobileSidebar" tabindex="-1">
  <div class="offcanvas-header border-bottom">
    <span class="fw-bold text-primary">Dashboard</span>
    <button type="button" class="btn-close"
            data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body p-0">
    <nav class="sidebar-nav p-3">
      <a href="/dashboard"
         class="nav-item d-flex align-items-center gap-3
                p-3 rounded-2 text-dark text-decoration-none mb-1">
        <i class="bx bx-grid-alt fs-5"></i>
        Dashboard
      </a>
    </nav>
  </div>
</div>

<!-- Desktop sidebar — hidden on mobile -->
<aside class="sidebar d-none d-lg-flex flex-column">
  <!-- Same nav items -->
</aside>
Enter fullscreen mode Exit fullscreen mode

Offcanvas slides in from the left on mobile. Bootstrap handles animation, focus trapping, and dismiss behavior. No custom JavaScript needed.

Responsive Tables — The Right Way

Tables are the hardest responsive challenge in admin dashboards. Three approaches in order of preference:

Approach 1 — Horizontal scroll wrapper

<div class="table-responsive">
  <table class="table table-hover align-middle">
    <thead>...</thead>
    <tbody>...</tbody>
  </table>
</div>
Enter fullscreen mode Exit fullscreen mode

Simplest. Table scrolls horizontally on mobile. Works for most cases.

Approach 2 — Priority columns

Hide less important columns on mobile:

<table class="table">
  <thead>
    <tr>
      <th>Name</th>
      <th class="d-none d-md-table-cell">Email</th>
      <th class="d-none d-lg-table-cell">Role</th>
      <th>Status</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>User Name</td>
      <td class="d-none d-md-table-cell">user@email.com</td>
      <td class="d-none d-lg-table-cell">Admin</td>
      <td><span class="badge bg-success">Active</span></td>
      <td>
        <button class="btn btn-sm btn-outline-primary">Edit</button>
      </td>
    </tr>
  </tbody>
</table>
Enter fullscreen mode Exit fullscreen mode

Mobile shows Name, Status, Actions. Tablet adds Email. Desktop adds Role.

Approach 3 — Card layout on mobile

@include media-breakpoint-down(md) {
  .responsive-table {
    thead { display: none; }

    tr {
      display: block;
      margin-bottom: 1rem;
      border: 1px solid var(--bs-border-color);
      border-radius: var(--bs-border-radius);
      padding: 1rem;
    }

    td {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.5rem 0;
      border: none;

      &::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.8125rem;
        color: var(--bs-secondary-color);
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode 
<table class="table responsive-table">
  <tbody>
    <tr>
      <td data-label="Name">User Name</td>
      <td data-label="Email">user@email.com</td>
      <td data-label="Status">
        <span class="badge bg-success">Active</span>
      </td>
    </tr>
  </tbody>
</table>
Enter fullscreen mode Exit fullscreen mode

Cards on mobile. Normal table on tablet and above. Most polished — most code.

The Spacing System — Use It Consistently

Bootstrap's spacing scale maps to specific rem values:

m-1 / p-1 = 0.25rem (4px)
m-2 / p-2 = 0.5rem  (8px)
m-3 / p-3 = 1rem    (16px)
m-4 / p-4 = 1.5rem  (24px)
m-5 / p-5 = 3rem    (48px)
Enter fullscreen mode Exit fullscreen mode

When you need spacing outside the 1-5 scale — extend it in your SCSS:

$spacers: map-merge($spacers, (
  6: 4rem,
  7: 5rem,
  8: 6rem,
  9: 8rem,
  10: 10rem
));
Enter fullscreen mode Exit fullscreen mode

Now py-7 gives you 80px vertical padding — consistent with the Bootstrap system.

Browse Bootstrap 5.3 templates with responsive layouts done correctly at LettStart Design — real device tested, Lighthouse above 80, zero jQuery. Use FIRST30 for 30% off.

Top comments (0)