How to make a react-strap Button responsive?

Question

How do I make a react-strap Button contined in a Card responsive?

Current behaviour , as you see all the buttons in the card sort becomes a big ball:

Or when I try to make the window smaller this is what happens:

The Expected Behavior would be a more organized layout both when I make the window bigger or smaller, something like below:

Belwo the code I am using:

                        </CardText>
                        <div class="btn-toolbar">
                            <Button className="btn mr-3">Project Notes</Button>
                            <Button className="btn mr-3">Abstract</Button>
                            <Button className="btn mr-3">Location Map</Button>
                            <Button className="btn mr-3">Distances and Contours</Button>

                            <Button className="btn mr-3">Borrow Area Info</Button>
                            <Button className="btn mr-3">Solicitation</Button>
                            <Button className="btn mr-3">Specifications</Button>
                            <Button className="btn mr-3">Amendments</Button>
                            <Button className="btn mr-3">Plans</Button>
                        </div>
                    </CardBody>
                </Card>

What I have done so far:

I have been doing a lot of research as I just started using the great tool of react-strap . And if you go inside the documentation there are several interesting application on how to handle the cards. I think the problem might be in the .css file. I don't have any settings in particular for that because I don't know if the card can be affected.

Maybe should I use a grid-layout? Or am I going in an opposite direction?

Please point to the right direction.

Answer 1

Try something like this. Of course you'll need to play around with the grid:

<CardBody>
    <Row>
      <Col>
         <Button >Project Notes</Button>
      </Col>
      <Col>
         <Button >Project Notes</Button>
      </Col>
      <Col>
         <Button >Project Notes</Button>
      </Col>
      <Col>
         <Button >Project Notes</Button>
      </Col>

    </Row>
    <Row style={{marginTop:'20px'}}>
      <Col>
         <Button >Project Notes</Button>
      </Col>
      <Col>
         <Button >Project Notes</Button>
      </Col>
      <Col>
         <Button >Project Notes</Button>
      </Col>
      <Col>
         <Button >Project Notes</Button>
      </Col>

    </Row>

</CardBody>

The docs: https://reactstrap.github.io/components/layout/