Nearby lessons
4 of 39📊 BS5 Grid Basic
📌 What Is the Bootstrap 5 Grid System?
The grid uses .container (or .container-fluid), .row (horizontal groups), and .col / .col-* (columns). It’s a 12-column system built with flexbox. Columns must be inside a .row, and rows inside a container.
📐 Grid Structure (.container, .row, .col)
.container – outer wrapper. .row – flex container for columns (use inside container). .col – equal-width columns (auto-sizes). .col-* – fixed-width columns (e.g. .col-6 = 50%, .col-4 = 33.33%). Total column numbers in a row should add up to 12 or less.
📏 Fixed-Width Columns (.col-1 to .col-12)
.col-1 through .col-12 – fixed column widths. .col-6 = 6/12 = 50%, .col-4 = 4/12 = 33.33%, .col-8 = 8/12 = 66.67%, etc. Numbers add up to 12 per row.
📱 Responsive Columns (.col-md-*, .col-lg-*, etc.)
.col-sm-*, .col-md-*, .col-lg-*, .col-xl-*, .col-xxl-* – apply column width at that breakpoint and up. Below the breakpoint, columns stack (full width). Example: .col-md-6 stacks on mobile, then becomes 50% width from MD (768px) up.
✅ Grid Best Practices
- Columns must be inside a .row, rows inside a .container.
- Column numbers in a row should total 12 or less.
- Use responsive classes (.col-md-*) so layouts adapt to screen size.