Bootstrap 5's grid system is a powerful and flexible layout system built with flexbox. It allows you to create responsive layouts using a series of containers, rows, and columns. The grid system is designed to be fully responsive, adapting to different screen sizes and devices.

Basic Structure

The basic structure of a Bootstrap grid involves creating a container, adding rows, and then adding columns within those rows. Here's an example:

In this example, three equal-width columns are created across all devices and viewports using the predefined grid classes. The columns are centered within the parent .container¹.

Responsive Breakpoints