How to useBootstrap and Flexbox 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.
Example: This example uses the flex-box 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://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"> <title>Equal Height Columns</title> </head> <body> <div class="container"> <header class="text-center mt-5"> <h1 class="site-title text-success"> w3wiki </h1> <p class="site-description"> Approach 1: Using Bootstrap and Flexbox </p> </header> <div class="row equal-height-row d-flex flex-wrap"> <div class="col-md-4 bg-warning rounded p-4 d-flex flex-column justify-content-between"> <div> <h2 class="column-title"> C++ </h2> <p> C++ is a widely used programming language known for its versatility and performance. It's commonly used for system software, game development, and more. </p> </div> </div> <div class="col-md-4 bg-success rounded p-4 d-flex flex-column justify-content-between"> <div> <h2 class="column-title"> ReactJS </h2> <p> ReactJS is a powerful JavaScript library for building interactive user interfaces. It's maintained by Facebook and used by countless developers worldwide.</p> </div> </div> <div class="col-md-4 bg-info rounded p-4 d-flex flex-column justify-content-between"> <div> <h2 class="column-title"> Python </h2> <p> Python is a beginner-friendly and versatile programming language. It's widely used in web development, data analysis, machine learning, and more. </p> </div> </div> </div> </div> </body> </html> |
Note: To verify whether the height is the same or not. We can follow the below steps one by one:
- Firstly, Inspect the column by right-clicking and choosing the option “Inspect“.
- In the “Elements” panel, we can see the overall HTML structure.
- We need to select the column in “Elements“.
- We need to find the “Height” property in the “Computed” or in “Styles” which will be the calculated height of the column.
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.
Table of Content
- Using Bootstrap and Flexbox
- Using Bootstrap Grids
- Using Bootstrap Table