How to use equal-height-col In Bootstrap
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.
Contact Us