Learning Bootstrap 5 Layout from Scratch: A Practical Guide to Responsive Grids

Bootstrap5 is a popular front - end framework that helps us quickly build responsive web pages. The so - called “responsive” means that the web page can automatically adapt to the screen sizes of different devices such as mobile phones, tablets, and computers. For beginners, one of the most core functions of Bootstrap is the responsive grid system, which can easily achieve layout changes under different screens. Let’s learn step by step.

1. Installing Bootstrap5¶

For beginners, the simplest way is to use a CDN to introduce Bootstrap’s CSS and JavaScript files. Add the Bootstrap CSS link in the <head> of the HTML page, and add the JavaScript link before the end of the <body> (because the interactive functions of Bootstrap require JS support).

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <!-- Import Bootstrap5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <title>Learn Bootstrap5 Layout from Scratch</title>
</head>
<body>

  <!-- Page content -->

  <!-- Import Bootstrap5 JS (depends on Popper.js, introduced together via CDN here) -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Now that Bootstrap5 is installed, you can directly use its class names to write layouts.

2. Core Concepts of Responsive Grid System¶

The Bootstrap grid system is based on a three - layer structure of “Container → Row → Column”, just like building blocks:
- Container: Wraps the entire content, centers the page, and automatically adjusts the width under different screens (for example, leaves margins on both sides on mobile phones and centers on computers).
- Row: Used to create a horizontal layout, must be placed inside the container, and will automatically handle the arrangement of columns.
- Column: The actual content area, used to divide the width of the page. Bootstrap divides the page width into 12 columns, and the size of the column is represented by “how many of the 12 columns it occupies” (for example, occupying 4 columns is col - 4).

3. Column Breakpoints and Ratios¶

Different devices have different screen sizes. Bootstrap uses “breakpoints” to distinguish screen sizes, such as:
- xs: Extra small screen (mobile phone, width < 576px)
- sm: Small screen (tablet portrait, ≥576px)
- md: Medium screen (tablet landscape, ≥768px)
- lg: Large screen (computer, ≥992px)
- xl: Extra large screen (wide - screen computer, ≥1200px)

The format of the column class name is col - <breakpoint> - <ratio>, for example:
- col - md - 4: On medium screens (≥768px) and above, this column occupies 4 columns (1/3 of the width).
- If no breakpoint is added (such as col - 6), it defaults to occupying 6 columns under all screen sizes (1/2 of the width).

4. Practical Application: Building a Responsive Layout with Grid System¶

Let’s create a simple page. The content area will use the grid system to achieve layout changes under different screens. The goal is: “1 column on mobile phones, 2 columns on tablets, and 3 columns on computers”.

Example Code: Responsive Three - Column Layout¶

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Key: Let mobile phones correctly recognize screen width -->
  <title>Responsive Grid Practice</title>
  <!-- Import Bootstrap5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

  <!-- Top navigation bar (simple example) -->
  <nav class="navbar navbar-expand-lg bg-light">
    <div class="container">
      <a class="navbar-brand" href="#">My Website</a>
    </div>
  </nav>

  <!-- Content area: responsive grid -->
  <div class="container my - 4"> <!-- my - 4 is a built - in "margin - top:1rem" in Bootstrap, which creates spacing between content and navigation -->
    <div class="row"> <!-- Row -->
      <!-- First column: 1 column on mobile, 6 columns on tablet, 4 columns on computer -->
      <div class="col - sm - 12 col - md - 6 col - lg - 4 bg - white border p - 3">
        <h5>Section 1</h5>
        <p>This is the content of the first column. It will occupy the full width on mobile phones, half the width on tablets, and 1/3 on computers.</p>
      </div>

      <!-- Second column: same structure as the first column, different content -->
      <div class="col - sm - 12 col - md - 6 col - lg - 4 bg - white border p - 3">
        <h5>Section 2</h5>
        <p>This is the content of the second column. It has the same structure as the first column, just different content.</p>
      </div>

      <!-- Third column: 1 column on mobile, 12 columns on tablet, 4 columns on computer -->
      <div class="col - sm - 12 col - md - 12 col - lg - 4 bg - white border p - 3">
        <h5>Section 3</h5>
        <p>This is the content of the third column. It occupies the full width on mobile phones and tablets, and 1/3 on computers.</p>
      </div>
    </div>
  </div>

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

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

Code Explanation:¶

col - sm - 12 col - md - 6 col - lg - 4:
col - sm - 12: On mobile phones (and above for sm), it occupies 12 columns (100% of the screen width).
col - md - 6: On tablets (md and above), it occupies 6 columns (50% of the screen width).
col - lg - 4: On computers (lg and above), it occupies 4 columns (33.3% of the screen width).
bg - white border p - 3: bg - white sets the background color to white, border adds a border, and p - 3 sets the padding to 16px. These are all built - in “shortcut styles” of Bootstrap, which can quickly beautify the content.

5. Common Tips: Quickly Beautify the Page¶

In addition to the grid system, Bootstrap has many helper classes that can help you quickly adjust styles, such as:
- Text Centering: text - center (centers text)
- Background Color: bg - primary (blue), bg - success (green), bg - light (light gray), etc. (Bootstrap’s built - in color library)
- Padding/Margin: p - 3 (padding 1rem), m - 3 (margin 1rem). The larger the number, the larger the spacing (0 - 5)
- Card: The card class wraps the content into a card - like style (more beautiful)

6. Summary¶

The core of the Bootstrap5 responsive grid system is “12 - column layout + breakpoint adaptation”. You can easily achieve layout changes under different screens by using the col - <breakpoint> - <ratio> class name. Now you can:
1. Copy the example code above, open it in a browser, and adjust the window size to see the layout changes under different devices.
2. Try modifying col - md - 6 to col - md - 4 to see if the column width changes.
3. Add bg - primary or text - danger and other color classes to the columns to experience Bootstrap’s shortcut styles.

At first, it may seem a bit many class names, but you’ll remember them with more practice. The biggest advantage of Bootstrap is “out - of - the - box”, so you don’t need to write CSS repeatedly and can focus on the content itself. Next, you can try using the grid system to create more complex pages, such as navigation bars and image carousels, and gradually get familiar with its other functions.