Detailed Explanation of Bootstrap 5 Grid System: Containers, Rows, Columns, and Breakpoint Settings

What is the Bootstrap Grid System?¶

In web development, layout is crucial. Bootstrap 5’s grid system acts like a set of “pre - fabricated building blocks,” allowing you to quickly create responsive layouts (automatically adapting to different screens) and page columns without writing CSS from scratch. Based on the “12 - column grid” concept, by simply combining class names, your page will look neat on devices such as mobile phones, tablets, and computers.

I. Container: The “Boundary” of Layout¶

The container is the “root” of the grid system, and all rows and columns must be placed within it. Bootstrap 5 offers two types of containers:

• .container: A fixed - width container that automatically centers based on the screen width and has maximum width limits at different breakpoints (for example, the xl breakpoint corresponds to 1200px, and xx corresponds to 1400px). It is suitable for most scenarios, such as centering web content.
• .container - fluid: A container that occupies the entire screen width without maximum width limits. It is suitable for layouts that require full - screen width (such as navigation bars and banners).

Example:

<div class="container">  <!-- Fixed - width centered container -->
  <div class="container - fluid">  <!-- Full - screen container (nested in a fixed container, for demonstration only) -->
    <!-- Rows and columns are written here -->
  </div>
</div>

II. Row: The “Carrier” of Columns¶

Rows are used to wrap columns and have two key functions:
1. Offset the padding of the container to allow columns to be close to the container edge;
2. Use negative margins to evenly distribute columns in a row and achieve automatic line wrapping through display: flex.

Note: Rows cannot exist alone and must be nested within a container!

III. Column: The “Canvas” for Content¶

Columns are the core of the grid, based on the 12 - column layout rule (a row can have a maximum of 12 columns). The width of a column is controlled by class names, with the format .col - [breakpoint] - [number of columns], where “number of columns” indicates how many of the 12 columns this column occupies (1 - 12).

1. Basic Column Classes (No Breakpoints)¶

• .col - 1 to .col - 12: The number of columns is fixed on all devices. For example:
• .col - 6: Occupies 6 of the 12 columns (i.e., 50% width);
• .col - 4: Occupies 4 of the 12 columns (i.e., 33.33% width).

Example (Two - column layout):

<div class="container">
  <div class="row">  <!-- Row wraps columns -->
    <div class="col - 6">Left content</div>
    <div class="col - 6">Right content</div>
  </div>
</div>

In any screen, the two columns each occupy 50% width.

2. Responsive Column Classes (With Breakpoints)¶

By using breakpoints (such as sm, md, lg), columns can automatically adjust the layout at different screen widths. The breakpoint rules in Bootstrap 5 are as follows:

Example (Responsive Three - column Layout):
Requirement: On mobile phones (<576px), two columns stack; on tablets (≥576px), split into two columns; on computers (≥992px), split into three columns.
Code:

<div class="container">
  <div class="row">
    <!-- On mobile: 12 columns (default), on tablet: 6 columns, on computer: 4 columns -->
    <div class="col - sm - 6 col - md - 4 col - lg - 3">Content 1</div>
    <div class="col - sm - 6 col - md - 4 col - lg - 3">Content 2</div>
    <div class="col - sm - 12 col - md - 4 col - lg - 3">Content 3</div>
  </div>
</div>

• Explanation:
• On mobile phones (<576px): All columns default to 12 columns (.col - sm - 6 is invalid because sm is ≥576px), so the three columns will stack vertically;
• On tablets (576px ~ 767px): The sm breakpoint takes effect. The first two columns each occupy 6 columns (two columns side by side), and the third column occupies 12 columns (a separate row);
• On computers (≥992px): The lg breakpoint takes effect, and each column occupies 3 columns (12/4 = 3), so the three columns are displayed side by side.

IV. Practical Breakpoint Settings¶

Core Logic: Control column width using “breakpoint prefix + number of columns”. The larger the breakpoint, the higher the priority (it overrides the settings of smaller breakpoints).

Case: Simple bottom layout of navigation bar

<div class="container">
  <div class="row">
    <!-- On small screens: 4 columns side by side; on medium screens: 3 columns side by side; on large screens: 2 columns side by side -->
    <div class="col - sm - 4 col - md - 3 col - lg - 2">Function 1</div>
    <div class="col - sm - 4 col - md - 3 col - lg - 2">Function 2</div>
    <div class="col - sm - 4 col - md - 3 col - lg - 2">Function 3</div>
    <div class="col - sm - 4 col - md - 3 col - lg - 2">Function 4</div>
    <div class="col - sm - 4 col - md - 3 col - lg - 2">Function 5</div>
    <div class="col - sm - 4 col - md - 3 col - lg - 2">Function 6</div>
  </div>
</div>

V. Column Spacing and Alignment¶

• Column Spacing: By default, there is 15px padding between columns. You can adjust it through the .gap - * class (such as .gap - 2 to reduce the spacing and .gap - 4 to increase the spacing).

  <div class="row gap - 3">  <!-- Set column spacing to 1.5rem (default is 1rem) -->
    <div class="col - 6">Content 1</div>
    <div class="col - 6">Content 2</div>
  </div>

• Content Alignment: Use .text - start (left - aligned), .text - center (centered), and .text - end (right - aligned) to control the alignment of text within the column;
  Use .align - items - start (top alignment), .align - items - center (center alignment), and .align - items - end (bottom alignment) to control vertical alignment within the row.

VI. Summary¶

The core of the Bootstrap 5 grid system is the three - level structure of “container → row → column”, combined with breakpoint rules to achieve responsive layouts. Remember:
1. The container is the “boundary”, the row is the “row within the container”, and the column is the “content unit within the row”;
2. Columns are based on a 12 - column grid, and the class name format is .[breakpoint] - [number of columns] (for example, .md - 4 means the medium screen occupies 4 columns);
3. Breakpoints from mobile phones to large screens are sm (576px), md (768px), lg (992px), xl (1200px), and xxl (1400px).

With simple class name combinations, your page can “adapt” to various devices without manually writing media queries! Practice different breakpoint column layouts more, and you’ll master it quickly~