EnglishEnglish العربيةالعربية PortuguêsPortuguês Japanese日本語
404 Not Found

404 Not Found

nginx

Responsive Layout

1. Lesson Introduction

(1) Prerequisites

(2) 🎯 You Will Learn

(3) Pain Point

Charlie is developing a backend dashboard: desktop shows a full sidebar and table, tablet collapses the sidebar, and mobile hides the sidebar in favor of a hamburger menu. Implementing this with pure CSS media queries requires writing a lot of repetitive code.

(4) Solution

Bootstrap provides a complete responsive utility class system—simply insert breakpoint suffixes into class names to apply different styles at different screen sizes. Bootstrap's responsive utility classes make this extremely simple.

Understanding: Responsiveness is like a telescopic hanger—the same HTML structure automatically adjusts its layout for screens of different widths. Bootstrap's breakpoints are the gears: mobile, tablet, desktop, large screen, extra-large screen.

(5) Benefits

After using Bootstrap's responsive utility classes, Charlie achieved multi-device adaptation with classes like d-none d-md-block and col-12 col-md-6, significantly boosting development efficiency.

2. Breakpoint System

▶ Example: Breakpoint System Overview

Bootstrap 5 defines 6 breakpoints, based on min-width (mobile-first):

Breakpoint Class Minimum Width Typical Devices
Extra small none < 576px Mobile portrait
Small sm >= 576px Mobile landscape
Medium md >= 768px Tablets
Large lg >= 992px Laptops
Extra large xl >= 1200px Desktop monitors
Extra extra large xxl >= 1400px Extra-large screens
100% 
graph LR
    subgraph Bootstrap breakpoints (min-width)
        A[xs 0-575px] --> B[sm 576-767px]
        B --> C[md 768-991px]
        C --> D[lg 992-1199px]
        D --> E[xl 1200-1399px]
        E --> F[xxl 1400px+]
    end

Output: Components styled with Bootstrap 5.3 (such as buttons, cards, carousels, collapses, etc.) will render. The page uses the Bootstrap default theme (light) and responsive grid by default. Meaning of mobile-first: Write styles for small screens first, then use min-width breakpoints to override for larger screens. Classes without breakpoints apply to all screens; those with breakpoints only apply above the specified width.

3. Display Utility Classes: d-*

Control element visibility/hiddenness across different screens:

HTML 
<div class="d-none d-md-block bg-primary text-white p-3 mb-2">
  Visible on md+ screens, hidden on mobile
</div>

<div class="d-block d-md-none bg-success text-white p-3 mb-2">
  Visible on mobile, hidden on md+ screens
</div>
▶ Try it Yourself

Output: Components styled with Bootstrap 5.3 (such as buttons, cards, carousels, collapses, etc.) will render. The page uses the Bootstrap default theme (light) and responsive grid by default.

(1) Common Responsive Display Modes

Requirement Implementation
Hidden on mobile, visible on tablet+ d-none d-md-block
Visible on mobile, hidden on tablet+ d-block d-md-none
Always hidden d-none
Visible when printing d-none d-print-block

4. Responsive Text

HTML 
<!-- Responsive text alignment -->
<p class="text-center text-md-start">
  Centered on mobile, left-aligned on md+
</p>

<!-- Responsive font size -->
<p class="fs-6 fs-md-5 fs-lg-4">
  Gets larger on bigger screens
</p>

<!-- Responsive text color -->
<p class="text-muted text-md-primary">
  Gray on mobile, blue on tablet+
</p>
▶ Try it Yourself

Output: Components styled with Bootstrap 5.3 (such as buttons, cards, carousels, collapses, etc.) will render. The page uses the Bootstrap default theme (light) and responsive grid by default.

Implementation Mobile Tablet+
text-center text-md-start Centered Left-aligned
text-start text-lg-center Left-aligned Centered on desktop

5. Responsive Margins & Spacing

HTML 
<div class="container">
  <div class="card p-3 p-md-4 p-lg-5 mb-3 mb-md-0">
    <h5>Responsive Card</h5>
    <p class="mb-0 mb-md-2">Padding and margin adapt to screen size.</p>
  </div>

  <div class="d-flex flex-column flex-md-row gap-2 gap-md-3">
    <button class="btn btn-primary">Save</button>
    <button class="btn btn-secondary">Cancel</button>
  </div>
</div>
▶ Try it Yourself

Output: Components styled with Bootstrap 5.3 (such as buttons, cards, carousels, collapses, etc.) will render. The page uses the Bootstrap default theme (light) and responsive grid by default.

Requirement Implementation
Compact on mobile, spacious on desktop p-3 p-md-5
Stacked on mobile, side-by-side on desktop flex-column flex-md-row
Small gap on mobile, larger gap on desktop gap-2 gap-lg-4

6. Responsive Images

HTML 
<img src="https://via.placeholder.com/1200x600" class="img-fluid" alt="Responsive image">
▶ Try it Yourself

Output: Components styled with Bootstrap 5.3 (such as buttons, cards, carousels, collapses, etc.) will render. The page uses the Bootstrap default theme (light) and responsive grid by default. .img-fluid is equivalent to max-width: 100%; height: auto;—the image will not exceed its parent container's width and scales proportionally.

HTML 
<img src="https://via.placeholder.com/400x400" class="img-fluid rounded-circle" alt="Circular" style="max-width: 200px;">
<img src="https://via.placeholder.com/200x200" class="img-thumbnail" alt="Thumbnail">
▶ Try it Yourself

Output: Components styled with Bootstrap 5.3 (such as buttons, cards, carousels, collapses, etc.) will render. The page uses the Bootstrap default theme (light) and responsive grid by default.

Class Effect
img-fluid Responsive width
img-thumbnail 1px rounded border
rounded Rounded corners

7. Breakpoints & Display Utility Class Reference

(1) Complete Breakpoint Reference

Breakpoint Name Class Min Width Container Max Width Typical Devices
Extra Small none 0px 100% Mobile portrait
Small sm 576px 540px Mobile landscape
Medium md 768px 720px Tablets
Large lg 992px 960px Laptops
Extra Large xl 1200px 1140px Desktop monitors
Extra Extra Large xxl 1400px 1320px Extra-large screens

(2) Display Utility Class Reference

Class Effect Typical Usage
d-none Always hidden Hide element
d-block Always block-level display Show element
d-inline Always inline display Inline text
d-inline-block Always inline-block Icon + text
d-flex Flex container Layout container
d-none d-md-block Hidden on mobile, visible on tablet+ Responsive sidebar
d-block d-md-none Visible on mobile, hidden on tablet+ Hamburger menu
d-none d-print-block Visible only when printing Print layout
HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Gallery</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h3 class="text-center mb-4">Responsive Image Gallery</h3>
    <div class="row g-3">
      <div class="col-6 col-md-4 col-lg-3">
        <img src="https://via.placeholder.com/300x200/0d6efd/fff?text=1" class="img-fluid rounded" alt="img1">
      </div>
      <div class="col-6 col-md-4 col-lg-3">
        <img src="https://via.placeholder.com/300x200/198754/fff?text=2" class="img-fluid rounded" alt="img2">
      </div>
      <div class="col-6 col-md-4 col-lg-3">
        <img src="https://via.placeholder.com/300x200/dc3545/fff?text=3" class="img-fluid rounded" alt="img3">
      </div>
      <div class="col-6 col-md-4 col-lg-3">
        <img src="https://via.placeholder.com/300x200/ffc107/000?text=4" class="img-fluid rounded" alt="img4">
      </div>
      <div class="col-6 col-md-4 col-lg-3">
        <img src="https://via.placeholder.com/300x200/6f42c1/fff?text=5" class="img-fluid rounded" alt="img5">
      </div>
      <div class="col-6 col-md-4 col-lg-3">
        <img src="https://via.placeholder.com/300x200/20c997/fff?text=6" class="img-fluid rounded" alt="img6">
      </div>
    </div>
    <p class="text-muted text-center mt-3">col-6 → col-md-4 → col-lg-3, each image uses img-fluid for responsiveness</p>
  </div>
</body>
</html>
▶ Try it Yourself

Output: Components styled with Bootstrap 5.3 (such as buttons, cards, carousels, collapses, etc.) will render. The page uses the Bootstrap default theme (light) and responsive grid by default.

▶ Example: Responsive Typography

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Typography</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h3 class="text-center text-md-start mb-4">Responsive Typography</h3>

    <p class="fs-6 fs-md-5 fs-lg-4 text-center text-md-start">
      Font size increases with screen size: Mobile fs-6 → Tablet fs-5 → Desktop fs-4.<br>
      <code>.fs-6 .fs-md-5 .fs-lg-4</code>
    </p>

    <hr>

    <p class="text-muted text-md-primary text-lg-success text-center text-md-start">
      Responsive text color: Mobile gray → Tablet blue → Desktop green.<br>
      <code>.text-muted .text-md-primary .text-lg-success</code>
    </p>

    <hr>

    <div class="d-flex flex-column flex-md-row justify-content-center justify-content-md-between align-items-center bg-light p-3 rounded">
      <span class="badge bg-primary fs-6 fs-md-5 mb-2 mb-md-0">Badge One</span>
      <span class="badge bg-success fs-6 fs-md-5 mb-2 mb-md-0">Badge Two</span>
      <span class="badge bg-danger fs-6 fs-md-5">Badge Three</span>
    </div>
  </div>
</body>
</html>
▶ Try it Yourself

Output: Components styled with Bootstrap 5.3 (such as buttons, cards, carousels, collapses, etc.) will render. The page uses the Bootstrap default theme (light) and responsive grid by default.

▶ Example: Responsive Spacing

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Spacing</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <!-- Hero with responsive padding -->
    <div class="bg-primary text-white p-3 p-md-5 rounded text-center text-md-start">
      <h1 class="display-6">Responsive Spacing</h1>
      <p class="mb-0">Mobile p-3 (16px), Desktop p-5 (48px)</p>
    </div>

    <!-- Stacked sections -->
    <section class="my-4 p-3 p-lg-4 bg-light rounded">
      <h5>Section One</h5>
      <p>my-4 ensures vertical spacing, p-3 for mobile padding, p-lg-4 for large screen padding.</p>
    </section>

    <section class="my-4 p-3 p-lg-4 bg-light rounded">
      <h5>Section Two</h5>
      <p class="mb-0 mb-md-2">Spacing below text is also responsive.</p>
      <p class="d-none d-md-block">This paragraph only appears on md+ screens.</p>
    </section>

    <section class="my-4 p-3 p-lg-4 bg-light rounded">
      <h5>Section Three</h5>
      <p>All sections use the same spacing classes for consistency.</p>
    </section>

    <div class="d-flex flex-column flex-md-row gap-2 gap-md-3 justify-content-md-end">
      <button class="btn btn-outline-secondary">Cancel</button>
      <button class="btn btn-primary">Submit</button>
    </div>
  </div>
</body>
</html>
▶ Try it Yourself

Output: Components styled with Bootstrap 5.3 (such as buttons, cards, carousels, collapses, etc.) will render. The page uses the Bootstrap default theme (light) and responsive grid by default.

▶ Example: Responsive Table

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Table</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h3 class="mb-3">Responsive Table</h3>
    <p class="text-muted small mb-3">Hide "Department" and "Status" columns on mobile, show all on tablet+</p>

    <div class="table-responsive">
      <table class="table table-bordered">
        <thead class="table-dark">
          <tr>
            <th>#</th>
            <th>Name</th>
            <th class="d-none d-md-table-cell">Department</th>
            <th>Email</th>
            <th class="d-none d-md-table-cell">Status</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>John Doe</td>
            <td class="d-none d-md-table-cell">Tech</td>
            <td>john@example.com</td>
            <td class="d-none d-md-table-cell"><span class="badge bg-success">Active</span></td>
          </tr>
          <tr>
            <td>2</td>
            <td>Jane Smith</td>
            <td class="d-none d-md-table-cell">Marketing</td>
            <td>jane@example.com</td>
            <td class="d-none d-md-table-cell"><span class="badge bg-warning">Probation</span></td>
          </tr>
          <tr>
            <td>3</td>
            <td>Mike Johnson</td>
            <td class="d-none d-md-table-cell">Design</td>
            <td>mike@example.com</td>
            <td class="d-none d-md-table-cell"><span class="badge bg-danger">Resigned</span></td>
          </tr>
        </tbody>
      </table>
    </div>

    <p class="text-muted small">
      Tip: Use <code>d-none d-md-table-cell</code> to hide columns on mobile. Use <code>table-responsive</code> to prevent table overflow.
    </p>
  </div>
</body>
</html>
▶ Try it Yourself

Output: Components styled with Bootstrap 5.3 (such as buttons, cards, carousels, collapses, etc.) will render. The page uses the Bootstrap default theme (light) and responsive grid by default.

❓ Frequently Asked Questions

Q What does "mobile-first" mean? Why do large-screen styles use breakpoint suffixes?
A Mobile-first means the base styles (without breakpoints) are for small screens, and styles with breakpoints override for larger screens. For example, d-none d-md-block: d-none applies to all screens (hides), while d-md-block overrides to show on md and above.
Q What if I want one behavior between lg and md, and another between sm and xs?
A Bootstrap uses min-width to override upwards. You can write d-none d-md-block d-xl-none to mean: hidden on xs-sm, visible on md-lg, hidden on xl+.
Q Is there a difference between using img-fluid for responsive images and directly using CSS max-width: 100%?
A Essentially the same. .img-fluid is a preset utility class for max-width: 100%; height: auto;, designed to integrate more consistently with Bootstrap's image components.
Q Does Bootstrap have classes related to print styles?
A Yes. Bootstrap 5 provides a d-print-* series of utility classes, like d-print-none (hidden when printing) and d-print-block (visible when printing). It also provides display-print-* to control the display value during printing. These classes only apply within print media and are great for optimizing print layouts.
Q How do I customize breakpoints?
A Customizing breakpoints requires modifying the Sass variables $grid-breakpoints and $container-max-widths (detailed in Phase 5). If using only CSS overrides, you can write media queries like @media (min-width: 1600px) { ... }, but custom breakpoint utility classes (like d-xxl-block) will not be auto-generated. It's recommended to use Bootstrap's standard breakpoints whenever possible.

📖 Summary

📝 Assignments

  1. ⭐ Create a responsive navbar: mobile uses flex-column for vertical links, tablet+ uses flex-row for horizontal.
  2. ⭐⭐ Create a three-tier responsive card: mobile p-2, tablet p-4, desktop p-5, text centered on mobile and left-aligned on desktop.
  3. ⭐⭐⭐ Create a table that hides columns 3 and 4 on mobile (d-none d-md-table-cell) and shows all columns on desktop.

Previous Lesson: Flexbox · Next Lesson: Grid

Web-Tutorial.com

Web-Tutorial Tech Team

A team of developers maintaining programming tutorials. Each tutorial is written and reviewed by developers with expertise in that field. We work to keep our content accurate and reliable — if you spot an issue, please let us know.

100%

🙏 帮我们做得更好

我们是刚上线的编程教程站，几个人的小团队，精力有限。页面虽经检查，难免还有疏漏——链接失效、排版错乱、内容有误、语言生硬……

如果您发现了，麻烦告诉我们，我们会在收到反馈后第一时间进行修复，再次感谢您的光临 🙏