Bootstrap 5 Grid system Equal-width
Last Updated :
22 Nov, 2022
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>
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>
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...