Bootstrap 3 has so many components. That’s always my first port of call. But it doesn’t have cards and these I’m being asked for on basically every site I build these days.

Here’s some boilerplate code I use for these cards. HTML, CSS (using flexbox)…

HTML

<div class="cards">
    <!-- Start loop here -->
    <div class="card col-xs-12 col-sm-6 col-md-4">
        <div class="card-inner">
            <img class="img-circle" src="https://sessionize.com/image/fe59-400o400o2-58-5310-4afc-924a-4fad8f4c2c22.6be129c7-f282-49e1-a00b-84671cb40ebf.jpg">
            <h3>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Labore, iusto?</h3>
            <div>Perspiciatis nobis laudantium voluptatum quaerat possimus qui nam, dolores, obcaecati ipsa perferendis a, quisquam vero nostrum quia voluptatem. Architecto ex excepturi ipsam quisquam id nulla repellendus obcaecati assumenda eligendi! Eveniet eaque...</div>
            <div class="card-footer">
            <ul class="list-unstyled list-inline">
                <li><span class="label">Example label 1</span></li>
                <li><span class="label">Example label 2</span></li>
                <li>
                    <a href="#" class="btn btn-primary" role="button">Read more</a>
                </li>
            </ul>
            </div>
        </div>
    </div>
    <!-- End loop here -->
</div>

CSS

.cards {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

.card {
    display: flex;
}

.card-inner {
    border-radius: 0.5em;
    padding: 2em;
    margin-bottom: 2em;
    box-shadow: 0 0.25em 0.4em rgb(0 0 0 / 50%);
    transition: transform .4s ease;
}

.card-inner:hover {
    transform: scale(1.04);
    box-shadow: 0 0.45em 0.7em rgb(0 0 0 / 50%);
}

.card .img-circle {
    width: 8em;
}

.card-footer {
    align-self: flex-end;
    margin-top: 28px;
}