Bootstrap Grid System
Bootstrap grid system, working on the basis of the flexbox concept that creates a responsive layout. It uses containers, rows, and columns to layout and aligns the content.
How Grid System Works?
1.0 Responsive Breakpoint:
Bootstrap grid system provides six responsive breakpoints namely
.col-*,.col-sm-*,.col-sm-*,.col-md-*, .col-lg-*,.col-xl-*, and
.col-xxl-* that works on the basis of min-width media query, it starts working from the starting breakpoint till all those above breakpoints if not exist further other breakpoints.
For example,
.col-sm-3 applies to sm,dm,
lg,xl and xxl while as in
.col-sm-3.col-lg-3 ,col-sm-3 applies to
sm,dm and col-lg-3 applies to
lg,xl and xxl.
2.0 Containers center and horizontally pad your content
There are three types of containers, namely fixed containers, full-width containers, and responsive containers. Fixed width container can be achieved by using .container-class, full-width container can be achieved by .container-fluid class while as responsive class can be achieved by .container-{breakpoint} class. For example
.container-md.
3.0 Rows are wrappers for columns
Rows exist within the container element, while all the columns exist within rows. Rows show different layouts with respect to the breakpoint of the column.
4.0 Columns are incredibly flexible
Bootstrap grid system provides a 12-column grid system, that allows creating a different layout(e.g., col-6 spans six). Widths are determined with the help of percentages, so you always have the same relative sizing.
Grid options
Bootstrap grid system's breakpoint utility classes are very useful for custom design. These six grid tiers are mentioned below.
- Extra small (xs)
- Small (sm)
- Medium (md)
- Large (lg)
- Extra large (xl)
- Extra extra large (xxl)
Each of these breakpoints has its own container, unique class prefix, and modifiers. Lets us visualize the grid changes across this breakpoint.
General Syntax
<div class="container">
<div class="row">
<div class="col-sm"> One of three columns</div>
<div class="col-sm">One of three columns </div>
<div class="col-sm">One of three columns</div>
</div>
</div>
Source Code
<div class="container mt-5">
<div class="row">
<div class="col-sm columns">
One of three columns
</div>
<div class="col-sm columns">
One of three columns
</div>
<div class="col-sm columns">
One of three columns
</div>
</div>
<!--row-->
</div>
<!--/container-->
Source Code : Output
Code Explanation
Note:Follow the above mention concept to create a bootstrap grid system.
| Extra small(xs) <576px | Small(sm) ≥576px | Medium(md) ≥768px | Large(lg) ≥992px | Extra large(xl) ≥1200px | XX-Large (xxl)≥1400px | |
|---|---|---|---|---|---|---|
| container max-width | None(auto) | 540px | 720px | 960px | 1140px | 1320px |
| class prefix | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- | .col-xxl- |
| Total Column | 12 | 12 | 12 | 12 | 12 | 12 |
| Gutter width | 1.5rem (.75rem on left and right) | |||||
| Custom gutters | Yes | |||||
Web Tutorials
