From Mobile to PC: Implementation Steps of Responsive Layout with Bootstrap 5

In web development, ensuring a page displays well on various devices (such as mobile phones, tablets, and computers)—known as “responsive layout”—is a essential skill. As one of the most popular front-end frameworks, Bootstrap 5 helps achieve this goal quickly. This article will guide you through mastering the core usage of Bootstrap 5 responsive layout in the simplest way, step by step.

1. Why Choose Bootstrap 5?¶

Responsive Design: Automatically adapts to different screen sizes (mobile, tablet, computer) without writing complex CSS media queries.
Grid System: Based on a 12-column grid layout, quickly dividing pages using “rows” and “columns.”
Rich Components: Includes common components like navigation, buttons, and cards, eliminating the need for从零开发 (development from scratch).
Lightweight & Efficient: Easily introduced via CDN, no local installation required, ideal for beginners.

2. Introducing Bootstrap 5¶

To use Bootstrap 5, you first need to include its CSS and JS files in your HTML. Using a CDN (Content Delivery Network) is recommended to avoid downloading local files.

Complete Inclusion Code (in `<head>` and `</body>`):¶

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <!-- Critical: Tells the browser to use the device's width as the base and initial scale 1.0 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Responsive Layout Example</title>
  <!-- Include Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <!-- Page content here -->

  <!-- Include Bootstrap 5 JS (required for interactive features like dropdowns, modals) -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Tip: The <meta name="viewport"> is critical for responsiveness. It tells the browser, “Use the device’s width as the base and set the initial scale to 1x.” Without this, pages may appear zoomed in or out on mobile devices.

3. Core of Responsive Layout: Grid System¶

Bootstrap 5’s responsive layout is built on a “12-column grid system” using rows and columns. Key logic:
- The page width is divided into 12 equal parts (12 columns).
- Wrap content with row and specify column width with col-* (where * is the number of columns, 1-12).
- Adapt to different screen sizes using “breakpoint prefixes” (e.g., mobile, tablet, computer).

1. Screen Size Breakpoints and Prefixes¶

Bootstrap 5 provides 5 default breakpoints (minimum width for each screen):
- xs: Mobile (<576px, no prefix)
- sm: Small tablets (≥576px)
- md: Medium tablets (≥768px)
- lg: Large tablets/small computers (≥992px)
- xl: Computers (≥1200px)

Example: col-sm-4 means “On small screens and above, the column spans 4 columns” (≈33.3% of the page width).

2. Containers¶

All content must be wrapped in a container. There are two types:
- container: Fixed width, centered on large screens (prevents content from being too wide).
- container-fluid: Full-width, no horizontal margins (ideal for full-screen layouts).

<div class="container"> <!-- Fixed-width container -->
  <div class="row"> <!-- Row -->
    <div class="col"> <!-- Column (automatically spans 12 columns by default) -->
      Content 1
    </div>
    <div class="col"> <!-- Column (automatically spans 12 columns by default) -->
      Content 2
    </div>
  </div>
</div>

4. Practical Implementation: Responsive Layout from Mobile to PC¶

Let’s build a complete page (header + navigation + content + sidebar + footer) to demonstrate responsive layout.

Step 1: Basic Structure¶

Start with a simple HTML page and include Bootstrap 5 via CDN:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 5 Responsive Example</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <!-- Page content -->

  <!-- Bootstrap 5 JS (required for interactive features) -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Step 2: Add Header and Footer¶

Use bg-primary for background color, text-white for text color, and py-3 for padding:

<!-- Header -->
<header class="bg-primary text-white py-3">
  <div class="container">
    <h1>My Website</h1>
  </div>
</header>

<!-- Footer -->
<footer class="bg-dark text-white py-3 text-center">
  <div class="container">
    <p>© 2023 My Website</p>
  </div>
</footer>

Use navbar class and navbar-expand-lg to expand navigation on larger screens:

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container">
    <!-- Logo -->
    <a class="navbar-brand" href="#">Logo</a>
    <!-- Navigation menu -->
    <div class="collapse navbar-collapse">
      <ul class="navbar-nav">
        <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Products</a></li>
        <li class="nav-item"><a class="nav-link" href="#">About</a></li>
      </ul>
    </div>
  </div>
</nav>

Step 4: Content Area and Sidebar (Core Responsive Layout)¶

Use row to wrap content and sidebar, with col-* to set column widths for different screens:
- Large screens (lg): Content area takes 9 columns, sidebar takes 3 columns (col-lg-9 and col-lg-3).
- Small screens (sm): Both content and sidebar take 12 columns (col-sm-12, stacked automatically).

<div class="container my-4"> <!-- my-4: Vertical margin -->
  <div class="row"> <!-- Row -->
    <!-- Content area -->
    <div class="col-lg-9">
      <div class="card mb-4"> <!-- Card component with bottom margin -->
        <div class="card-body">
          <h2 class="card-title">Main Content</h2>
          <p>Primary content like articles or product lists (9 columns on large screens).</p>
        </div>
      </div>
    </div>

    <!-- Sidebar -->
    <div class="col-lg-3">
      <div class="card">
        <div class="card-body">
          <h3 class="card-title">Sidebar</h3>
          <p>Secondary content like categories or recommendations (3 columns on large screens).</p>
        </div>
      </div>
    </div>
  </div>
</div>

5. Key Knowledge Summary¶

Responsive Core: Use col-* with breakpoint prefixes (sm, md, lg, etc.) to adjust column widths across screen sizes.
Grid Rules: Each row (row) can have up to 12 columns; total columns per row must not exceed 12.
Container Role:
- container: Fixed width to prevent content overflow.
- container-fluid: Full-width layout.
Common Utility Classes:
- text-center: Center text.
- bg-*: Background color (e.g., bg-primary).
- mb-*/py-*: Margins/padding (e.g., mb-4 = 4 units of bottom margin).

6. Preview of Effects¶

Mobile/small tablets: Sidebar stacks below content, all columns span full width (col-sm-12).
Medium/large screens: Content area spans 9 columns, sidebar 3 columns (col-lg-9 and col-lg-3), with a compact layout.

7. Conclusion¶

The core of Bootstrap 5’s responsive layout is the “grid system + breakpoint settings.” With simple col-* classes, you can quickly achieve multi-device adaptation. Just include the CDN, wrap content with container, divide rows with row, and define columns with col-* to make your page “adapt” to mobile, PC, and other devices automatically.

Start experimenting now: Copy the code above into an HTML file, adjust column widths for different screen sizes, and experience the magic of responsive layout!