Bootstrap Grid System

Bootstrap grid system works 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 example .container-md.

3.0 Rows are wrappers for columns

Rows exist within the container element while as 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 determine with the help of percentages so you always have the same relative sizing.

Grid options

Bootstrap’s grid system has six breakpoints utilities 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.

	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

Example

General Syntax

      <div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      Two of three columns
    </div>
    <div class="col-sm">
      Three of three columns
    </div>
  </div>
</div>

Try It Now

Source Code

    <div class="container">
  <div class="row">
    <div class="col-sm bg-info text-white py-5">
      One of three columns
    </div>
    <div class="col-sm bg-primary  text-white py-5">
      Two of three columns
    </div>
    <div class="col-sm bg-danger  text-white py-5">
      Three of three columns
    </div>
  </div><!--/row-->
</div>  <!--/container-->

Try it yourself

Source Code : Output

One of three columns

Two of three columns

Three of three columns

Note:Follow the above mention concept to create a bootstrap grid system.

Online Test / Quiz

Question set 1

Web Tutorials

Html Tutorial HTML

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Tutorial MATERIALIZE CSS