I am currently implementing react bootstrap with Container, Row, and Col components. However, my code isn't functioning as expected - instead of displaying columns, they are appearing in a row-like fashion.
Here is the code snippet that I am referring to:
import React from "react";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
function Header() {
return (
<Container>
<Row>
<Col xs={4} md={4} lg={4} sm={4}>
First
</Col>
<Col xs={4} md={4} lg={4} sm={4}>
Second
</Col>
<Col xs={4} md={4} lg={4} sm={4}>
Third
</Col>
</Row>
</Container>
);
}
export default Header;