HTML / Markup Public

Card Grid with Equal Height Cards

Create a responsive Bootstrap card grid where cards keep equal height.

#bootstrap #card #grid #responsive

HTML / Markup

<div class="row g-4">
    <div class="col-md-6 col-lg-4">
        <div class="card h-100">
            <div class="card-body d-flex flex-column">
                <h5 class="card-title">Feature title</h5>
                <p class="card-text text-muted">Short description of the feature.</p>
                <a href="#" class="btn btn-primary mt-auto">Learn more</a>
            </div>
        </div>
    </div>
</div>

Notes

h-100 on the card and d-flex on the body make card layouts cleaner.

Snippet actions

CodShot user

Updated: 2026-06-08 14:33

Public snippets

Forks