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
Contact Us