I am trying to convert an HTML Bootstrap web page into React-Bootstrap web page. Even though I am simply replicating the html page in react, I am not getting the desired results.

App.jsx

function App() {
  return (
      <>
          <TopBar />
          <Container fluid className="mt-4 h-100">
              <Row className="h-100">
                  <LeftPanel />
                  <RightPanel />
              </Row>
          </Container>
      </>
  );
}

This is the main function where I have put a topbar that works correctly and a fluid container with a property h-100 to occupy the full height of the screen. I have put a Row that occupies the full height too. Then I added LeftPanel and RightPanel.

LeftPanel

function LeftPanel() {
    return(
      <>
          <Col md={4} className="bg-light pt-3 mx-auto left-sector side-panel">
              <ListGroup as="ul" variant="flush" defaultActiveKey="#link1">
                  <ListGroup.Item as="li" action href="#link1">All</ListGroup.Item>
                  <ListGroup.Item as="li" action href="#link2">Favourites</ListGroup.Item>
                  <ListGroup.Item as="li" action href="#link3">Best Rated</ListGroup.Item>
                  <ListGroup.Item as="li" action href="#link4">Seen Last Month</ListGroup.Item>
                  <ListGroup.Item as="li" action href="#link5">Unseen</ListGroup.Item>
              </ListGroup>
          </Col>
      </>
    );
}

In bootstrap grid system, this section occupies 4 columns.

RightPanel

function RightPanel() {
    return(
        <>
            <Col md={8} className="pt-3">
                <ListGroup as="ul">
                    <ListGroup.Item as="li" active>All</ListGroup.Item>
                    <ListGroup.Item as="li">Favourites</ListGroup.Item>
                </ListGroup>
            </Col>
        </>
    );
}

RightPanel occupies 8 columns.

I tried to verify the rendered html page and it’s the same as the one I coded in html. Any suggestion for a react beginner?