How to useBootstrap Grids in Bootstrap

Q: How to useBootstrap Grids in Bootstrap

In this approach, we are using the Bootstrap and Flexbox approaches for creating equal-height columns in Bootstrap. We have used different classes like ‘d-flex’, ‘flex-wrap‘, ‘flex-column‘ etc in the columns. This assures that each column in the flex container has equal height columns.

Approach 1: Using Bootstrap and Flexbox

Approach 3: Using Bootstrap Table

In this approach, we are using Bootstrap classes such as ‘container‘, ‘row‘, and ‘col‘. Also, the columns are arranged in the grid layout, with the equal-width columns. Using these classes we are making the columns of equal height rather than having CSS rules.

Example: This example uses the Bootstrap Grids approach to create an equal-height column.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" 
          href= 
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> 
    <title>Equal Height Columns with Bootstrap Grid</title> 
</head> 
  
<body> 
    <div class="container mt-5"> 
        <div class="text-center"> 
            <h1 class="geeks-heading text-success"> 
                w3wiki 
            </h1> 
            <h3 class="approach-heading"> 
                Approach 2: Using Bootstrap Grids 
            </h3> 
        </div> 
        <div class="row equal-height-row"> 
            <div class="col equal-height-col bg-primary"> 
                <h2>Column 1</h2> 
                <p>This is some sample content for column 1.</p> 
            </div> 
            <div class="col equal-height-col bg-success"> 
                <h2>Column 2</h2> 
                <p>This is some sample content for column 2.</p> 
            </div> 
            <div class="col equal-height-col bg-warning"> 
                <h2>Column 3</h2> 
                <p>This is some sample content for column 3.</p> 
            </div> 
            <div class="col equal-height-col bg-info"> 
                <h2>Column 4</h2> 
                <p>This is some sample content for column 4.</p> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

How to Create Equal Height Columns in Bootstrap ?

This article will demonstrate how to create equal-height columns in Bootstrap. We will use different approaches to achieve equal heights using the bootstrap classes and methods.