Bootstrap 5 Grid system Equal-width

Bootstrap 5 Grid system is a powerful mobile-first responsive flexbox grid that allows up to 12 columns across the page. You can also group the columns together.

The equal-width grid system is basically used to create the grid in equal sizes. With the help of classes, we will manage the grid's width.

Grid system Equal-width used Classes:

.row: This class is used to create the row grid and used in the parent class to create an equal-width grid system.
.col: This class is used to create a grid/column and this class is used inside of the .row class.

Note: you can also use another class of bootstrap like border class for creating a border of the grid and text color classes.

Syntax:

 <div class="row">
     <div class="col">
         ...
     </div>
     ...
 </div>

Example 1: In this example, we will use .row and .col classes to create two grids of equal width.

HTML

<!DOCTYPE html>
<html>

<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous">
</head>

<body>
    <div class="container">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        
        <h3>Bootstrap5 Grid system Equal-width</h3>

        <div class="row">
            <div class="col border bg-danger">
                GFG Column 1
            </div>
            <div class="col border bg-secondary">
                GFG Column 2
            </div>
        </div>
    </div>
</body>

</html>

Output:

Example 2: In this example, we will use .row and .col classes to create different grids of different equal widths.

HTML

<!DOCTYPE html>
<html>

<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
</head>

<body>
    <div class="container">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>

        <h3>Bootstrap5 Grid system Equal-width</h3>
    
        <div class="row">
            <div class="col border bg-danger">
                GFG Column 1
            </div>
            <div class="col border bg-secondary">
                GFG Column 2
            </div>
        </div>
        <br><br>

        <div class="row">
            <div class="col border bg-primary">
                GFG Column 1
            </div>
            <div class="col border bg-warning">
                GFG Column 2
            </div>
            <div class="col border bg-info">
                GFG Column 3
            </div>
        </div>
        <br><br>

        <div class="row">
            <div class="col border bg-secondary">
                GFG Column 1
            </div>
            <div class="col border bg-success">
                GFG Column 2
            </div>
            <div class="col border bg-danger">
                GFG Column 3
            </div>
            <div class="col border bg-primary">
                GFG Column 4
            </div>
        </div>
        <br><br>
        
        <div class="row">
            <div class="col border bg-danger">
                GFG Column 1
            </div>
            <div class="col border bg-secondary">
                GFG Column 2
            </div>
            <div class="col border bg-primary">
                GFG Column 3
            </div>
            <div class="col border bg-info">
                GFG Column 4
            </div>
            <div class="col border bg-warning">
                GFG Column 5
            </div>
        </div>
    </div>
</body>

</html>

Output:

Reference: https://getbootstrap.com/docs/4.0/layout/grid/#equal-width

Bootstrap 5 Grid system Equal-width

Explore