Bootstrap's grid system uses a series of containers, rows, and columns to layout and align content. It's built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together.
For example, here are two grid layouts that apply to every device
and viewport, from xs to xl. Add any
number of unit-less classes for each breakpoint you need and every
column will be the same width.
Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.
Use {breakpoint}="auto" props to size columns based
on the natural width of their content.
For grids that are the same from the smallest of devices to the
largest, use the col and cols="*" props.
Specify a number of cols when you need a particularly
sized column; otherwise, feel free to stick to
col (which is applied automatically if no
cols are specified).
Using a single set of sm="*" or
sm (boolean for equal width @sm) props, you can
create a basic grid system that starts out stacked on extra small
devices before becoming horizontal on desktop (medium) devices
Don't want your columns to simply stack in some grid tiers? Use a combination of different props for each tier as needed. See the example below for a better idea of how it all works.