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

The layout of Bootstrap 5 centers around containers, rows, columns, and their nesting, forming the foundation for quickly building responsive pages. **Containers** are the "large boxes" of the layout, available in two types: `.container` features a fixed width that automatically adjusts its maximum width based on screen size (e.g., 768px when md ≥ 768px) and is centered; `.container-fluid` spans the full width of the screen. **Rows** serve as "horizontal carriers" within containers, nested inside them and using negative margins to counteract container padding. They are only used to wrap columns and support a 12-column grid system (maximum 12 columns per row). **Columns** are the core "cells," with class names following the format `col-[breakpoint]-[number of columns]`. Breakpoints include sm (576px), md (768px), etc. (five types total), and the sum of column numbers per row must equal 12 (e.g., `col-md-4` occupies 4/12 width). They support responsive layouts, displaying different column counts at various breakpoints. **Nesting** allows rows and columns to be placed within columns, implemented by nesting `.row` within the target column to create multi-level layouts, with internal columns still adhering to the 12-column rule. Core rule: Containers wrap rows, which wrap columns.