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:
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" > w3wiki </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= "Beginner-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:
Contact Us