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:
Table of Content
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.
//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.
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: