How to make Bootstrap Columns all the same Height ?

In this article, we are going to implement Columns Using React JS and Bootstrap while developing software we need to create columns of the same height that’s why in this article we are going to implement multiple columns of the same height using React JS and Bootstrap.

Prerequisites:

• React JS
• Bootstrap

Using column-height

In this approach, we are using the React-Bootstrap classes of Flexbox 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. Also, we are using the user and useEffect hooks to print the height of each column in real time. When the column or the size is modified on the screen, the height of the column is also modified and we are printing this value in real time.

Example: Above approach is implemented in the given code.

Javascript

//App.js
import React, {useRef,useEffect,} from "react";
import {Container,Row,Col} from "react-bootstrap";
function App() {
    const col1 = useRef(null);
    const col2 = useRef(null);
    const col3 = useRef(null);
    useEffect(() => {
        const colHeight = () => {
            if (
                col1.current &&
                col2.current &&
                col3.current
            ) {
                const col1Height =
                    col1.current.clientHeight;
                const col2Height =
                    col2.current.clientHeight;
                const col3Height =
                    col3.current.clientHeight;
                col1.current.querySelector(
                    ".column-height"
                ).textContent =
                    `Height: ${col1Height}px`;
                col2.current.querySelector(
                    ".column-height"
                ).textContent =
                    `Height: ${col2Height}px`;
                col3.current.querySelector(
                    ".column-height"
                ).textContent =
                    `Height: ${col3Height}px`;
            }
        };
        colHeight();
        window.addEventListener(
            "resize",
            colHeight
        );
        return () => {
            window.removeEventListener(
                "resize",
                colHeight
            );
        };
    }, []);
    return (
        <Container>
            <header className="text-center mt-5">
                <h1 className="site-title
                               text-success">
                    GeeksforGeeks
                </h1>
            </header>
            <Row className="equal-height-row
                            d-flex flex-wrap">
                <Col
                    md={4}
                    className="bg-warning rounded
                               p-4 d-flex
                               flex-column
                               justify-content-between"
                    ref={col1}
                >
                    <div>
                        <h2 className="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 className="column-height">
                        Height: 0px
                    </div>
                </Col>
                <Col
                    md={4}
                    className="bg-success rounded
                               p-4 d-flex flex-column
                               justify-content-between"
                    ref={col2}
                >
                    <div>
                        <h2 className="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 className="column-height">
                        Height: 0px
                    </div>
                </Col>
                <Col
                    md={4}
                    className="bg-info rounded p-4
                               d-flex flex-column
                               justify-content-between"
                    ref={col3}
                >
                    <div>
                        <h2 className="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 className="column-height">
                        Height: 0px
                    </div>
                </Col>
            </Row>
        </Container>
    );
}
export default App;

Output:

Using equal-height-col

In this example, we are using the React-Bootstrap classes like ‘table’, ‘equal-height-row, ‘row’, and ‘col’ to create the layout. This examples assures that the equal-height column by applying the normal behavior with the table elements. This approach uses Bootstrap Table classes to maintain equal heights without the need for additional CSS.

Example: This example shows the use of the above-explained approach.

Javascript

import React from "react";
import {Container,Row,Col,} from "react-bootstrap";
function App() {
    return (
        <Container className="mt-5">
            <div className="text-center">
                <h1 className="geeks-heading
                               text-success">
                    GeeksforGeeks
                </h1>
            </div>
            <Row
                as="div"
                className="table
                           equal-height-row
                           justify-content-center"
            >
                <Col
                    md={2}
                    className="equal-height-col
                               bg-primary"
                >
                    <h2>Column 1</h2>
                    <p>
                        This is some
                        sample content
                        for column 1.
                    </p>
                </Col>
                <Col
                    md={2}
                    className="equal-height-col
                               bg-success"
                >
                    <h2>Column 2</h2>
                    <p>
                        This is some
                        sample content
                        for column 2.
                    </p>
                </Col>
                <Col
                    md={2}
                    className="equal-height-col
                               bg-warning"
                >
                    <h2>Column 3</h2>
                    <p>
                        This is some
                        sample content
                        for column 3.
                    </p>
                </Col>
                <Col
                    md={2}
                    className="equal-height-col
                               bg-info"
                >
                    <h2>Column 4</h2>
                    <p>
                        This is some
                        sample content
                        for column 4.
                    </p>
                </Col>
                <Col
                    md={2}
                    className="equal-height-col
                               bg-danger"
                >
                    <h2>Column 5</h2>
                    <p>
                        This is some
                        sample content
                        for column 5.
                    </p>
                </Col>
            </Row>
        </Container>
    );
}
export default App;

Output: