Bootstrap 5 Cards Same/Equal Height Tutorial & Demo

Bootstrap 5 Equal Height Cards
Code Snippet:Bootstrap 5 Equal Height Cards
Author: Manasseh El Bey
Published: January 11, 2024
Last Updated: January 22, 2024
Downloads: 34,842
License: MIT
Edit Code online: View on CodePen
Read More

This simple code snippet helps you to create equal height cards in Bootstrap 5. It uses Bootstrap native display flex class to align cards in a row with the same height.

You can use this snippet or simply get an idea to equalize your card’s height.

How to Create Bootstrap 5 Equal Height Cards

1. First of all, load the Bootstrap 5 framework into your webpage by including the following CDN links.

<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

<!-- Bootstrap 5 JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>

2. After that, create the HTML structure for equal height cards as follows and done.

<section class="bg-light pt-5 pb-5 shadow-sm">
  <div class="container">
    <div class="row pt-5">
      <div class="col-12">
        <h3 class="text-uppercase border-bottom mb-4">Equal height Bootstrap 5 cards example</h3>
      </div>
    </div>
    <div class="row">
      <!--ADD CLASSES HERE d-flex align-items-stretch-->
      <div class="col-lg-4 mb-3 d-flex align-items-stretch">
        <div class="card">
          <img src="https://i.postimg.cc/28PqLLQC/dotonburi-canal-osaka-japan-700.jpg" class="card-img-top" alt="Card Image">
          <div class="card-body d-flex flex-column">
            <h5 class="card-title">Dōtonbori Canal</h5>
            <p class="card-text mb-4">Is a manmade waterway dug in the early 1600's and now displays many landmark commercial locals and vivid neon signs.</p>
            <a href="#" class="btn btn-primary text-white mt-auto align-self-start">Book now</a>
          </div>
        </div>
      </div>
      <!--ADD CLASSES HERE d-flex align-items-stretch-->
      <div class="col-lg-4 mb-3 d-flex align-items-stretch">
        <div class="card">
          <img src="https://i.postimg.cc/4xVY64PV/porto-timoni-double-beach-corfu-greece-700.jpg" class="card-img-top" alt="Card Image">
          <div class="card-body d-flex flex-column">
            <h5 class="card-title">Porto Timoni Double Beach</h5>
            <p class="card-text mb-4">Near Afionas village, on the west coast of Corfu island. The two beaches form two unique bays. The turquoise color of the sea contrasts to the high green hills surrounding it.</p>
            <a href="#" class="btn btn-primary text-white mt-auto align-self-start">Book now</a>
          </div>
        </div>
      </div>
      <!--ADD CLASSES HERE d-flex align-items-stretch-->
      <div class="col-lg-4 mb-3 d-flex align-items-stretch">
        <div class="card">
          <img src="https://i.postimg.cc/TYyLPJWk/tritons-fountain-valletta-malta-700.jpg" class="card-img-top" alt="Card Image">
          <div class="card-body d-flex flex-column">
            <h5 class="card-title">Tritons Fountain</h5>
            <p class="card-text mb-4">Located just outside the City Gate of Valletta, Malta. It consists of three bronze Tritons holding up a large basin, balanced on a concentric base built out of concrete and clad in travertine slabs.</p>
            <a href="#" class="btn btn-primary text-white mt-auto align-self-start">Book now</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

That’s all! hopefully, you have successfully integrated these equal height cards into your project. If you have any questions or suggestions, let us know by comment below.

Connect with us on social media:

3 thoughts on “Bootstrap 5 Cards Same/Equal Height Tutorial & Demo”

  1. Thanks fr posting this, I already had existing code but the alignment was out due to different size images. Using sections of your code to add the flex worked perfect. Thanks you.

    Reply

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X