Advice on how to make a react-strap card layout better-looking? [closed]

I am using react-strap cards. In the application I have around 70 cards.

The problem is that it does not look very good from a user experience point of view. How can I make my .css better for the user?

Below is how the card is structured:

App.js

        <div class="btn-toolbar">
            <Row>
                <Col>
                    <a class="btn btn-primary" role="button" href={example2}>
                        Project Notes
                    </a>
                </Col>
                <Col>
                    <a class="btn btn-primary" role="button" href={example2}>
                        Location Map
                    </a>
                </Col>
            </Row>
            <Row style={{ marginTop: '20px' }}>
                <Col>
                    <a class="btn btn-primary" role="button" href={example2}>
                        Borrow Area Info
                    </a>
                </Col>
                <Col>
                    <a class="btn btn-primary" role="button" href={example2}>
                        Solicitation
                    </a>
                </Col>
            </Row>
        </div>

App.css

.btn-primary {
    display: inline-block;
    text-decoration: none;
    letter-spacing: var(--mainSpacing);
    color: var(--mainBlack);
    background: var(--shadowGreen);
    padding: 0.4rem 0.9rem;
    border: 3px solid var(--shadowGreen);
    transition: var(--mainTransition);
    text-transform: uppercase;
    cursor: pointer;
}

Thank you very much for pointing to the right direction.