Responsive Design with Bootstrap

Mobile-First Approach

Bootstrap uses a mobile-first approach, meaning it's designed to create responsive websites by starting with mobile designs and then scaling up to larger screens.

Key Principles

  • Design for mobile first: Start with the smallest screen size and progressively enhance for larger screens.
  • Use responsive breakpoints: Apply different styles at different screen widths using Bootstrap's breakpoint system.
  • Fluid layouts: Use percentage-based widths instead of fixed pixel values.
  • Responsive images: Ensure images scale properly on different devices.
  • Responsive typography: Text should be readable on all devices without requiring zooming.

Bootstrap's Breakpoints

Breakpoint Class Infix Dimensions
Extra small None <576px
Small sm ≥576px
Medium md ≥768px
Large lg ≥992px
Extra large xl ≥1200px
Extra extra large xxl ≥1400px

Responsive Grid System

Bootstrap's grid system is the foundation of responsive layouts. It uses a series of containers, rows, and columns to layout and align content.

Basic Responsive Grid


<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4">
      <!-- Full width on extra small, half width on medium, one-third on large -->
      Column 1
    </div>
    <div class="col-12 col-md-6 col-lg-4">
      Column 2
    </div>
    <div class="col-12 col-md-12 col-lg-4">
      Column 3
    </div>
  </div>
</div>

Auto-layout Columns


<div class="container">
  <div class="row">
    <div class="col">
      <!-- Equal width column -->
      Column 1
    </div>
    <div class="col">
      Column 2
    </div>
    <div class="col">
      Column 3
    </div>
  </div>
</div>

Column Wrapping

When the sum of column units exceeds 12, columns wrap to a new line:


<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this wraps onto a new line as one contiguous unit.</div>
    <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
  </div>
</div>

Column Breaks

Force columns to break to a new line:


<div class="container">
  <div class="row">
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    
    <!-- Force next columns to break to new line -->
    <div class="w-100"></div>
    
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  </div>
</div>

Responsive Utilities

Bootstrap provides several utility classes for controlling the visibility and behavior of elements across different screen sizes.

Display Utilities


<!-- Hide on extra small screens, show on small screens and up -->
<div class="d-none d-sm-block">Hidden on xs, shown on sm and up</div>

<!-- Show on extra small and small screens, hide on medium screens and up -->
<div class="d-block d-md-none">Shown on xs and sm, hidden on md and up</div>

<!-- Hide on all screen sizes except large -->
<div class="d-none d-lg-block d-xl-none">Hidden on all except lg</div>

Responsive Text Alignment


<!-- Left-aligned on xs, centered on sm and up -->
<p class="text-start text-sm-center">Left on extra small, centered on small and up.</p>

<!-- Centered on xs, right-aligned on md and up -->
<p class="text-center text-md-end">Centered on extra small, right-aligned on medium and up.</p>

Responsive Margins and Padding


<!-- No margin on xs, margin-top on md and up -->
<div class="mt-0 mt-md-4">Content</div>

<!-- Different padding at different breakpoints -->
<div class="p-2 p-sm-3 p-md-4 p-lg-5">Content with responsive padding</div>

Responsive Flexbox


<!-- Stack on mobile, side by side on desktop -->
<div class="d-flex flex-column flex-md-row">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

<!-- Different alignment at different breakpoints -->
<div class="d-flex justify-content-start justify-content-md-center justify-content-lg-end">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

Responsive Components

Many Bootstrap components have built-in responsive behaviors.

Responsive Navbar


<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

The navbar collapses into a hamburger menu on screens smaller than the lg breakpoint.

Responsive Tables


<!-- Responsive at all widths -->
<div class="table-responsive">
  <table class="table">
    <!-- Table content -->
  </table>
</div>

<!-- Responsive only at specific breakpoints -->
<div class="table-responsive-sm">
  <table class="table">
    <!-- Table content -->
  </table>
</div>

Responsive Images


<!-- Responsive image -->
<img src="..." class="img-fluid" alt="Responsive image">

<!-- Responsive image with max-width -->
<img src="..." class="img-fluid" style="max-width: 500px;" alt="Responsive image with max-width">

Responsive Embeds


<!-- 16:9 aspect ratio -->
<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="ratio ratio-4x3">
  <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>

<!-- 1:1 aspect ratio -->
<div class="ratio ratio-1x1">
  <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>

Testing Responsive Designs

Browser Developer Tools

Most modern browsers include device emulation tools that allow you to test your responsive designs:

  • Chrome: Open DevTools (F12) and click the "Toggle device toolbar" button or press Ctrl+Shift+M (Cmd+Shift+M on Mac).
  • Firefox: Open DevTools (F12) and click the "Responsive Design Mode" button or press Ctrl+Shift+M (Cmd+Option+M on Mac).
  • Safari: Open Web Inspector (Option+Cmd+I) and select the "Responsive Design Mode" from the Develop menu.

Testing Tips

  • Test on real devices: Emulators are useful but testing on actual devices provides the most accurate results.
  • Test various orientations: Check how your design looks in both portrait and landscape modes.
  • Test with different connection speeds: Use browser tools to simulate slower connections.
  • Check touch interactions: Ensure buttons and interactive elements are large enough for touch input.
  • Verify text readability: Make sure text is readable without zooming at all screen sizes.
Pro Tip: Bootstrap includes a responsive meta tag that ensures proper rendering and touch zooming on mobile devices: 
<meta name="viewport" content="width=device-width, initial-scale=1">
Always include this tag in the <head> of your HTML document.

Interactive Responsive Design Demo

This interactive demo allows you to visualize how Bootstrap's responsive grid system and components adapt to different screen sizes. Resize the viewport to see the changes in real-time.

Viewport Size:
Current viewport: XS Width: 0px

Responsive Grid System

col-12 col-sm-6 col-md-4 col-lg-3
col-12 col-sm-6 col-md-4 col-lg-3
col-12 col-sm-6 col-md-4 col-lg-3
col-12 col-sm-6 col-md-12 col-lg-3

Responsive Navigation

Responsive Card Layout

Product image
Product 1

This product description adapts to available space.

$19.99
Product image
Product 2

This product description adapts to available space.

$24.99
Product image
Product 3

This product description adapts to available space.

$29.99
Product image
Product 4

This product description adapts to available space.

$34.99

Responsive Order & Visibility

First on mobile, Third on desktop
Second on mobile, First on desktop
Third on mobile, Second on desktop
Always visible
Hidden on mobile (d-none d-md-block)
Visible only on mobile (d-md-none)

Responsive Typography & Alignment

This heading changes alignment (start → center → end)

This paragraph is centered on small screens and left-aligned on large screens.

Stacked on mobile, side-by-side on desktop
Instructions: Drag the right edge of the demo container to resize it and observe how the layout adapts to different viewport widths. You can also use the viewport size buttons above to set specific widths.

Responsive Behavior Observations

  • Resize the container to see how elements respond to different viewport widths
  • Notice how the grid columns stack vertically on small screens and arrange horizontally on larger screens
  • The navbar collapses into a hamburger menu on small screens
  • Card layouts adjust from 1 to 4 columns depending on available space
  • Elements change their order and visibility based on screen size
  • Text alignment and flex direction change at different breakpoints

Common Responsive Patterns

1. Stacked to Horizontal


<div class="container">
  <div class="row">
    <div class="col-12 col-md-4">
      <div class="p-3 bg-light">First column</div>
    </div>
    <div class="col-12 col-md-4">
      <div class="p-3 bg-light">Second column</div>
    </div>
    <div class="col-12 col-md-4">
      <div class="p-3 bg-light">Third column</div>
    </div>
  </div>
</div>

This pattern stacks elements vertically on mobile and arranges them horizontally on larger screens.

2. Two-column Layout with Sidebar


<div class="container">
  <div class="row">
    <div class="col-12 col-lg-8">
      <div class="p-3 bg-light">Main content area</div>
    </div>
    <div class="col-12 col-lg-4">
      <div class="p-3 bg-light">Sidebar</div>
    </div>
  </div>
</div>

On mobile, the sidebar appears below the main content. On larger screens, they appear side by side.

3. Column Reordering


<div class="container">
  <div class="row">
    <div class="col-12 col-md-4 order-md-2">
      <div class="p-3 bg-light">First in mobile, second in desktop</div>
    </div>
    <div class="col-12 col-md-8 order-md-1">
      <div class="p-3 bg-light">Second in mobile, first in desktop</div>
    </div>
  </div>
</div>

This pattern changes the visual order of elements between mobile and desktop views.

4. Offcanvas Navigation


<button class="btn btn-primary d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample">
  Toggle navigation
</button>

<div class="offcanvas offcanvas-start d-lg-none" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasExampleLabel">Navigation</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <!-- Mobile navigation items -->
  </div>
</div>

<div class="d-none d-lg-block">
  <!-- Desktop navigation items -->
</div>

This pattern uses an offcanvas menu for mobile navigation and a traditional navigation for desktop views.

More Topics in Fundamentals

Introduction to Bootstrap

Learn what Bootstrap is, its benefits, and how it compares to other frameworks

Getting Started with Bootstrap

Installation methods, basic template, and grid system basics

Bootstrap Icons

Learn how to use Bootstrap's official icon library in your projects