The basis of the Bootstrap framework relies in its grid system. Bootstrap offers components that allow to structure a website in a responsive grid layout. By letting you define a set of rows, each one having a set of independent columns, it allows you to build a solid grid system for your web page. Also, each column can have different sizes to perfectly fit your template.
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. A viewport is the available display size to render the contents of a page. For example, the size of browser window, minus the toolbars, scrollbars, and so on. The viewport meta tag allows you to define the viewport's display size.
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. The grid is a structure that consists of three distinct, but fundamentally linked, parts - an all encapsulating container, split into horizontal rows which are themselves split into 12 equal columns.
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. Every row is subdivided into 12 parts, so you can have up to 12 columns in a single row.
Then, content is placed within columns. Columns are immediate children of rows.
Two Column Layout
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 are at the core of Bootstrap's grid system. It encapsulates all other content within a section of a page, providing the base for how the section is rendered. Containers provide a means to center and horizontally pad your site’s contents. A container can apply to the entire contents of a page, where you would have one root container element, or to different sections of a page, where you would have numerous container elements on the page.
There are two types of container classes provided by Bootstrap: container and container-fluid. The container class renders the contents of the page to a fixed width. This width is based upon the width of the viewport, leveraging CSS media queries to determine which width is most suitable.
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. The power of the row lies in being able to stack content vertically.
Rows exist within containers, and those rows are split up into 12 equal columns. 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.
Columns are split up into five distinct breakpoints:
- col-xs-: This is for viewports below 544px (extra-small)
- col-sm-: This is for viewports of 544px or greater (small)
- col-md-: This is for viewports of 768px or greater (medium)
- col-lg-: This is for viewports of 992px or greater (large)
- col-xl-: This is for viewports of 1200px or greater (extra-large)
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. Breakpoints are predefined vertical and horizontal dimensions at which the style rules change. As these rules break, they trigger another set of rules optimized for those
dimensions. These rules are triggered by media queries, querying the dimensions of the viewport. For example, @media (min-width: 768px) will trigger a set of rules when the viewport is more than 768px wide.
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).