How to use column-height In Bootstrap
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; |
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