Bootstrap includes a responsive, mobile-first flexbox grid system to build layouts of all shapes and sizes. It appropriately scales up to 12 columns as the device or viewport size increases.
Mobile First Strategy: The code for Bootstrap starts by targeting smaller screens like mobile devices, tablets, and then expands for larger screens such as laptops, desktops.
Columns: Bootstrap's grid system allows up to 12 columns across the page. You can group the columns together to create wider columns.
How It Works
Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. First, rows are placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
Use rows to create horizontal groups of columns.
Then, content is placed within columns. Columns are immediate children of rows.
A basic grid system that starts out stacked on mobiles or tablets (small devices), and becomes horizontal on desktops (medium or large devices).
The sum of column spans should always add up to 12.
Bootstrap 4 Grid System
Containers provide a means to center and horizontally pad your site’s contents. Use .container for fixed width or .container-fluid for full width.
Rows are horizontal groups of columns that ensure columns are lined up properly. Use .row to ensure all the content is aligned properly down the left side.
Content is placed within columns, and only columns are immediate children of rows. Grid columns without a set width automatically have equal widths. For example, four instances of .col-sm will each automatically be 25% wide for small breakpoints.
Column classes indicate the number of columns you want to use out of the possible 12 per row. So, if you want three equal-width columns across, you can use .col-4. Columns have horizontal padding to create the gutters between individual columns.
4. Responsive Layout
To make the grid responsive, there are five grid breakpoints, one for each responsive breakpoint: all breakpoints (extra small), small, medium, large, and extra large. Grid breakpoints are based on minimum width media queries, which means that they apply to that one breakpoint and all those above it. For example, .col-sm-4 applies to small, medium, large, and extra large devices, but not for the extra small breakpoint.
Number of columns: 12
Gutter width: 30px (15px on each side of a column)
All Breakpoints: For grids that are the same from the smallest of devices to the largest, use the .col and .col-* classes.
Stacked to horizontal: Using a single set of .col-sm-* classes, you can create a basic grid system that starts out stacked and becomes horizontal at the small breakpoint (sm).