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" > w3wiki </ 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" > w3wiki </ 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
Contact Us