Bootstrap 5 Grid

Bootstrap 5 Grid System

Bootstrap 5 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 breakpoint if not exist further other breakpoint. 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 type of container namely fixed with container,full width container and responsive container.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 examle .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 determined with the help of percentages so you always have the same relative sizing.

Grid options

Bootstrap’s grid system utilies six breakpoint that could be apply to adapt custom layout 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

Try it now

Source Code

Try it now

Source Code : Output

One of three columns
One of three columns
One of three columns

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

Online Test / Quiz