Is there a way to get a React Bootsrap card to show one card per row dynamically on a small screen

Question

I am trying to get react bootstrap cards to show only card per row when the screen is small but it shows a mix of one and three cards per row . Please help.....example code is below

return (
      <Container className="align-middle g-0 bg-transparent">
        <Card.Body>
          <Row className="justify-content-center">
            {
              cards.map((card) => {
            
                return (
                  <Col className="col-lg-3 col-md-6 col-sm-12 col-xs-12">
                    <CardComponent  data={data} />
                  </Col>
                )
              })
            }
          </Row>
        </Card.Body>
      </Container>
    )

Answer 1

Instead of using className use the Bootstrap default way of defying columns, otherwise it adds a default col class

return (
<div className="App">
  <h1>Hello CodeSandbox</h1>
  <h2>Start editing to see some magic happen!</h2>
  <Container className="align-middle g-0 bg-transparent">
    <Card.Body>
      <Row className="justify-content-center">
        {cards.map((card) => (
          <Col xs='12' md='6' lg='3'>
            {card}
          </Col>
        ))}
      </Row>
    </Card.Body>
  </Container>
</div>

  );