React-Bootstrap cols not showing side by side and shows in new line

Question

I am trying to add Bootstrap into my react project with material.

Here is one of my component

import { styled } from "@mui/material/styles";
import Paper from "@mui/material/Paper";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Row";
export default function RecipeLanding() {
  const Item = styled(Paper)(({ theme }) => ({
    backgroundColor: theme.palette.mode === "dark" ? "#1A2027" : "#fff",
    ...theme.typography.body2,
    padding: theme.spacing(1),
    textAlign: "center",
    color: theme.palette.text.secondary,
  }));
  return (
    <Container>
      <Row>
        <Col>
          <Item>1 of 2</Item>
        </Col>
        <Col>2 of 2</Col>
      </Row>
      <Row>
        <Col>1 of 3</Col>
        <Col>2 of 3</Col>
        <Col>3 of 3</Col>
      </Row>
    </Container>
  );
}

Based on the documentation I have added the CSS cdn as well into my index.html

But still it shows like this

I didnt understand what I missed

Answer 1

Change this...

import Col from "react-bootstrap/Row";

...to this.

import Col from "react-bootstrap/Col";.