Solution 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/

Problem :

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:

error1

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

error2

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

organized

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.

Comments

Comment posted by i.brod

Maybe try using the grid, within the card?

Comment posted by Emanuele

Thanks for reading the question. How can I do that? Could you provide an example that I can integrate in the code?

Comment posted by ux.stackexchange.com

You should also consider whether or not buttons are the right UI for a list like that. Have you considered using text links instead? See

By