Open In App

BootStrap 5 Layout Grid System

Last Updated : 05 Jan, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

BootStrap5 Layout Grid system is responsive. It comes with a flexbox and allows up to 12 columns across the page. You can also group the columns together. The grid system is a powerful mobile-first responsive flexbox grid.

How it works: Here’s how the grid system comes together:

  • Its grid supports six responsive breakpoints. You can control container, column sizing and behavior by each breakpoint.
  • Containers center and horizontally pad your content. Use container class for responsive width and container-fluid class for 100% width across all viewports and devices. Use container-md class for both fluid and pixel width.
  • Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them. 
  • Columns are incredibly flexible. There are 12 template columns available per row, allowing you to create different combinations of elements that span any number of columns.
  • Gutters are also responsive with customizable available across all breakpoints. We can change horizontal gutters with .gx-* and vertical gutters with .gy-*

BootStrap5 Layout Grid System:

  • Grid options: Bootstrap’s grid system works for all six breakpoints i.e xs, sm, md, lg, xl, xxl.
  • Auto-layout columns: This provides the creation of easy column sizes without an explicit numbered class.
  • Responsive classes: They provide predefined classes for building complex responsive, dynamic, and flexible layouts.
  • Nesting: We need to add a new row and set of columns for nesting which includes a set of columns that add up to 12 or fewer. 
  • Sass: This system also provides Sass variables and mixins to create custom and responsive page layouts. 
  • Customizing the grid: This is used to customize your grid as you want by using built-in grid Sass variables and map.

Example 1: Let’s see an example of auto-layout columns.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <!--Bootstrap CDN -->
    <link rel="stylesheet"
          href=
          crossorigin="anonymous">
</head>
 
<body class="m-2">
    <h1 class="text-success"> GeeksforGeeks </h1>
    <h3>BootStrap5 Layout Grid system</h3>
 
    <section class="container">
        <section class="row">
            <section class="col border bg-success">
                GFG Column 1
            </section>
            <section class="col border bg-secondary">
                GFG Column 2
            </section>
            <section class="col border bg-danger">
                GFG Column 3
            </section>
        </section>
        <br>
        <section class="row">
            <section class="col border bg-warning">
                GFG Column 1
            </section>
            <section class="col-6 border bg-light">
                GFG Column 2
            </section>
            <section class="col border bg-info">
                GFG Column 3
            </section>
        </section>
    </section>
</body>
 
</html>


Output:

bootstrap 5 Layout Grid System

Example 2: Let us see an example of equal width.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <!--Bootstrap CDN -->
    <link rel="stylesheet"
          href=
          crossorigin="anonymous">
</head>
 
<body class="m-2">
    <h1 class="text-success"> GeeksforGeeks </h1>
    <h3>BootStrap5 Layout Grid system</h3>
 
    <section class="container">
        <section class="row">
            <section class="col border
                bg-danger">
                GeeksforGeeks
            </section>
            <section class="col border
                bg-secondary">
                GeeksforGeeks
            </section>
            <section class="col border
                bg-primary">
                GeeksforGeeks
            </section>
            <section class="col border
                        bg-info">
                GeeksforGeeks
            </section>
            <section class="col border
                    bg-warning">
                GeeksforGeeks
            </section>
        </section>
        <br><br>
        <section class="row">
            <section class="col border
                    bg-secondary">
                GeeksforGeeks
            </section>
            <section class="col border
                    bg-success">
                GeeksforGeeks
            </section>
            <section class="col border
                    bg-danger">
                    GeeksforGeeks
            </section>
            <section class="col border
                    bg-primary">
                GeeksforGeeks
            </section>
        </section>
      </section>
</body>
 
</html>


Output:

BootStarp 5 Layout Grid System

bootstrap 5 Layout Grid System

Reference: https://getbootstrap.com/docs/5.0/layout/grid/



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments