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

Bootstrap 5 is a popular front-end framework, with its core feature being a responsive grid system that adapts to various devices such as mobile phones, tablets, and computers. Installation is straightforward by introducing the CSS and JS files via CDN. Its grid system is structured around a three-tier model: **Container → Row → Column**. The container (container) centers content and adapts to screen width; the row (row) handles horizontal layout; and the column (col) divides the width into 12 columns, which form the basis of the page layout. Column class names follow the format `col-<breakpoint>-<proportion>`, where breakpoints include xs (<576px), sm (≥576px), md (≥768px), lg (≥992px), and xl (≥1200px). The proportion represents the number of 12 columns (e.g., `col-md-4` means occupying 4 columns on medium-sized screens). In practice, this system enables responsive layout changes across devices, such as 1 column on mobile, 2 columns on tablets, and 3 columns on desktops. Additionally, Bootstrap provides utility classes for quick styling, including text alignment, background colors, and margins. The framework’s core lies in its 12-column layout combined with breakpoint adaptation, allowing responsive design through class names without the need to write repetitive CSS. This makes it ideal for beginners to rapidly build web pages.