How to use equal-height-col In Bootstrap

Output:

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"> 
                    w3wiki 
                </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:

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.