Bootstrap 5 introduces an updated grid system that utilizes flexbox for building complex layouts. It's a powerful mobile-first flexbox grid that helps developers create layouts of all shapes and sizes. The grid system is responsive, meaning columns will re-arrange depending on the screen size.

Basic Grid Structure

The grid system is based on a series of containers, rows, and columns. The basic structure involves a .container or .container-fluid for a full-width container, within which you place .row and then .col classes to create columns within the row. Here's a simple example:

Responsive Columns

Bootstrap's grid includes six responsive breakpoint classes for building complex responsive layouts. These breakpoints are based on minimum viewport widths and allow you to scale up elements as the viewport changes.