Bootstrap includes a responsive, mobile first fluid grid system that 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.
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 the 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.
There are five grid tiers, one for each responsive breakpoint:
- extra small (all breakpoints)
- extra large
Grid tiers are based on minimum widths, which means they apply to that one tier and all those above it. For example, .col-sm-4 applies to small, medium, large, and extra large devices.