How to use Bootstrap Grid In Bootstrap
In this approach, we are using Bootstrap’s grid system to divide the row into 7 equal columns. This can be achieved by using the .col-
classes with appropriate column widths to ensure equal distribution within the row.
Example: The below example uses Bootstrap Grid to make a row with 7 equal columns in Bootstrap.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Row with 7 equal columns</title>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h1 class="text-success">w3wiki</h1>
<h3>Using Bootstrap Grid</h3> <br>
<div class="row">
<div class="col-1">
<div class="bg-primary p-3 text-center text-white">
Column 1
</div>
</div>
<div class="col-1">
<div class="bg-secondary p-3 text-center text-white">
Column 2
</div>
</div>
<div class="col-1">
<div class="bg-success p-3 text-center text-white">
Column 3
</div>
</div>
<div class="col-1">
<div class="bg-danger p-3 text-center text-white">
Column 4
</div>
</div>
<div class="col-1">
<div class="bg-warning p-3 text-center text-white">
Column 5
</div>
</div>
<div class="col-1">
<div class="bg-info p-3 text-center text-white">
Column 6
</div>
</div>
<div class="col-1">
<div class="bg-dark p-3 text-center text-white">
Column 7
</div>
</div>
</div>
</div>
</body>
</html>
Output:
How to make a Row with 7 Equal Columns in Bootstrap ?
Bootstrap is the styling framework to make the web application more attractive. To create a row with 7 equal columns in Bootstrap, you can use the grid system by dividing the row into 12 columns and assigning each column a class such as col-1
for each of the 7 columns. This way, each column will occupy an equal portion of the row, ensuring a balanced layout across different screen sizes.
Table of Content
- Using Bootstrap Grid
- Using Flexbox