Bootstrap 5 Fundamentals: A Guide to Using Containers, Rows, and Columns with Nesting

In front-end development, page layout is both fundamental and core. As a mainstream front-end framework, Bootstrap 5 provides a concise and efficient responsive layout system, enabling us to quickly build beautiful pages that adapt to different devices. Today, we’ll learn about the most basic layout structures in Bootstrap 5: Containers (Container), Rows (Row), Columns (Column), and their nested usage methods.

1. Container: The “Box” of Layout¶

A container is the foundation of Bootstrap layout. Its role is to wrap page content, control the content’s width, and center-align it. It’s like putting content in a “packaging box” so that the content doesn’t stretch the entire screen in the browser while maintaining aesthetic spacing.

1.1 Common Container Classes¶

Bootstrap 5 provides two most commonly used container classes:
- .container: A fixed-width container that automatically adjusts its maximum width at different screen sizes while keeping content centered. For example:
- Below small screens (sm), width is 100%;
- From medium screens (md) onwards, width is 768px;
- From large screens (lg) onwards, width is 992px, and so on.
- .container-fluid: A full-width container with a width of 100% at all times. It has no fixed boundaries, and content spans from the left to the right edge of the screen.

1.2 Container Example¶

<!-- Fixed-width container -->
<div class="container">
  <p>I am centered content with fixed width</p>
</div>

<!-- Full-width container -->
<div class="container-fluid">
  <p>I am content with full screen width</p>
</div>

2. Row: The “Horizontal Carrier” for Columns¶

A row is a horizontal container used to wrap columns. It uses negative margins to offset the container’s padding, allowing columns to “snugly” align with the container’s left and right edges for tight arrangement. Rows must be directly nested inside containers and cannot be used alone.

2.1 Core Role of Rows¶

Provide the “horizontal axis” of the grid system, enabling columns to arrange horizontally within a row;
Leverage the display: flex property to achieve effects like automatic column equal height and distributed alignment.

2.2 Row Usage Rules¶

Rows must be nested within containers (.container or .container-fluid);
Rows can only contain columns (.col-* classes) directly; other content cannot be placed directly inside rows;
Each row can contain a maximum of 12 columns (Bootstrap 5 is based on a 12-column grid system).

2.3 Row Example¶

<div class="container">
  <div class="row"> <!-- Row must be inside a container -->
    <div class="col">Column 1</div>
    <div class="col">Column 2</div>
    <div class="col">Column 3</div>
  </div>
</div>

3. Column: The “Cell” of the 12-Column Grid¶

Bootstrap 5’s columns are based on a 12-column grid system, where the width of each column is determined by the “number of columns” (total columns = 12). The class name format for columns is col-[breakpoint]-[column-count], for example, col-md-4 means “on medium screens and above, this column occupies 4 column widths”.

3.1 Breakpoints and Column Naming Rules¶

Breakpoints: Bootstrap 5 has 5 screen breakpoints:
sm (576px): Small screens
md (768px): Medium screens
lg (992px): Large screens
xl (1200px): Extra-large screens
xxl (1400px): Extra-extra-large screens
Column Count: In the 12-column grid, the width percentage of each column is calculated as current column count / 12. For example, col-md-4 occupies 4/12 = 33.33% width.

3.2 Column Example¶

Basic Horizontal Arrangement:

<!-- 3 columns in a row, each occupying 4 columns -->
<div class="container">
  <div class="row">
    <div class="col-md-4">Occupies 4 columns (above medium screens)</div>
    <div class="col-md-4">Occupies 4 columns</div>
    <div class="col-md-4">Occupies 4 columns</div>
  </div>
</div>

Responsive Arrangement: Different column counts at different breakpoints (e.g., single column on mobile, two columns on tablets):

<div class="container">
  <div class="row">
    <!-- 6 columns on small screens (sm) and above, 12 columns on mobile (<576px) -->
    <div class="col-sm-6 col-12">Single column on mobile, two columns on tablet</div>
    <div class="col-sm-6 col-12">Single column on mobile, two columns on tablet</div>
  </div>
</div>

4. Column Nesting: Layout Within Columns¶

When you need to layout within a column (i.e., “large column containing small columns”), column nesting is required. The core of nested layout is: reusing the .row and .col-* combination within the target column.

4.1 Nesting Rules¶

Nested .row must be placed inside the parent column;
The inner .row also follows the 12-column grid, with the total number of columns not exceeding 12;
The width of the parent column does not affect the nested rows and columns (negative margins automatically offset).

4.2 Nesting Example¶

Requirement: An 8-column large column, internally divided into two 6-column small columns; the right 4 columns are displayed separately.

<div class="container">
  <div class="row">
    <!-- Parent column (occupies 8 columns) -->
    <div class="col-md-8">
      <div class="row"> <!-- Nested row -->
        <div class="col-md-6">Small column 1 (6 columns within parent column)</div>
        <div class="col-md-6">Small column 2 (6 columns within parent column)</div>
      </div>
    </div>
    <!-- Child column (occupies 4 columns) -->
    <div class="col-md-4">Right column (displayed separately)</div>
  </div>
</div>

Effect: The parent column (8 columns) is internally divided into two 6-column sections (total 12 columns) using a nested row, while the right 4 columns are displayed independently. The total number of columns per row is 12 (8 + 4).

5. Summary¶

The core of Bootstrap 5 layout is “Container wraps Row, Row wraps Column, and Columns can be nested”. Key rules are as follows:
1. Container (.container/.container-fluid): The “large box” of layout, either fixed or full-width;
2. Row (.row): The “horizontal row” inside the container, wrapping columns, and must be inside the container;
3. Column (.col-*): The core “cell”, based on a 12-column grid system, with responsiveness controlled by breakpoints;
4. Nesting: Reuse .row within a column to wrap small columns and achieve multi-level layout.

Practice is key to mastery! Try building a simple page using the above methods, adjust column counts at different breakpoints, and experience the convenience of Bootstrap 5 layout.