Making card items align with other cards

Question

I have a problem wherein the items inside cards does not align with each other when I add other text/s.

as you can see in the image below the items from books and recommended books are matched/aligned..

and here's the image when I am adding the view count in recommended books.

as you can see, the items in book 1 is adjust and I do not want that to happen I want to match/align from number 1 in books and number 1 in recommended books even after adding the view count in recommended books.

So here's my code for the cards.

<div class="col">
  <div class="card w-100 h-100" style="width: 25rem;">
    <div class="card-body bg-light">
      <h5 class="card-title text-center">Books</h5>
    </div>
    <div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
      <p class="p-3 mr-2">1</p>
      <div>
        <a class="fancybox" href="admin/files/Images/Networking_Security.png">
          <img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
        </a>
      </div>
      <div class="card-body">
        <p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
        <button class="col m-0 btn btn-info btn-sm">View</button>
      </div>
    </div>
    <div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
      <p class="p-3 mr-2">2</p>
      <div>
        <a class="fancybox" href="admin/files/Images/Networking_Security.png">
          <img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
        </a>
      </div>
      <div class="card-body">
        <p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
        <button class="col m-0 btn btn-info btn-sm">View</button>
      </div>
    </div>
    <div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
      <p class="p-3 mr-2">3</p>
      <div>
        <a class="fancybox" href="admin/files/Images/Networking_Security.png">
          <img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
        </a>
      </div>
      <div class="card-body">
        <p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
        <button class="col m-0 btn btn-info btn-sm">View</button>
      </div>
    </div>
    <div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
      <p class="p-3 mr-2">4</p>
      <div>
        <a class="fancybox" href="admin/files/Images/Networking_Security.png">
          <img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
        </a>
      </div>
      <div class="card-body">
        <p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
        <button class="col m-0 btn btn-info btn-sm">View</button>
      </div>
    </div>
  </div>
</div>
<div class="col">
  <div class="card w-100 h-100" style="width: 25rem;">
    <div class="card-body bg-light">
      <h5 class="card-title text-center">Recommended Books</h5>
    </div>
    <div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
      <p class="p-3 mr-2">1</p>
      <div>
        <a class="fancybox" href="admin/files/Images/Networking_Security.png">
          <img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
        </a>
      </div>
      <div class="card-body">
        <p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
        <span class="col m-0">Views: 28</span>
        <button class="col m-0 btn btn-info btn-sm">View</button>
      </div>
    </div>
    <div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
      <p class="p-3 mr-2">2</p>
      <div>
        <a class="fancybox" href="admin/files/Images/Networking_Security.png">
          <img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
        </a>
      </div>
      <div class="card-body">
        <p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
        <span class="col m-0">Views: 28</span>

        <button class="col m-0 btn btn-info btn-sm">View</button>
      </div>
    </div>
    <div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
      <p class="p-3 mr-2">3</p>
      <div>
        <a class="fancybox" href="admin/files/Images/Networking_Security.png">
          <img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
        </a>
      </div>
      <div class="card-body">
        <p class="col m-0" style="font-size: 1rem; ">Library Management System</p>.
        <span class="col m-0">Views: 28</span>
        <button class="col m-0 btn btn-info btn-sm">View</button>
      </div>
    </div>
    <div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
      <p class="p-3 mr-2">4</p>
      <div>
        <a class="fancybox" href="admin/files/Images/Networking_Security.png">
          <img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
        </a>
      </div>
      <div class="card-body">
        <p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
        <span class="col m-0">Views: 28</span>

        <button class="col m-0 btn btn-info btn-sm">View</button>
      </div>
    </div>
  </div>
</div>

as far as I know that w-100 and h-100 makes the cards responsive to each other. However I want the items from books and recommended books items to match.. I did w-100 and h-100 to make responsive with the width and height of the card.

Edit: I have removed the h-100 in my card and this was the result. I want the books' and recommended's height should be matched. However when I am returning it back, the items are not aligning as shown in the second image.

Answer 1

Remove the h-100 class on the card-body wrapper:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="row">
<div class="col">
  <div class="card w-100" style="width: 25rem;">
    <div class="card-body bg-light">
      <h5 class="card-title text-center">Books</h5>
    </div>
    <div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
      <p class="p-3 mr-2">1</p>
      <div>
        <a class="fancybox" href="admin/files/Images/Networking_Security.png">
          <img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
        </a>
      </div>
      <div class="card-body">
        <p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
        <button class="col m-0 btn btn-info btn-sm">View</button>
      </div>
    </div>
    <div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
      <p class="p-3 mr-2">2</p>
      <div>
        <a class="fancybox" href="admin/files/Images/Networking_Security.png">
          <img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
        </a>
      </div>
      <div class="card-body">
        <p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
        <button class="col m-0 btn btn-info btn-sm">View</button>
      </div>
    </div>
    <div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
      <p class="p-3 mr-2">3</p>
      <div>
        <a class="fancybox" href="admin/files/Images/Networking_Security.png">
          <img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
        </a>
      </div>
      <div class="card-body">
        <p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
        <button class="col m-0 btn btn-info btn-sm">View</button>
      </div>
    </div>
    <div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
      <p class="p-3 mr-2">4</p>
      <div>
        <a class="fancybox" href="admin/files/Images/Networking_Security.png">
          <img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
        </a>
      </div>
      <div class="card-body">
        <p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
        <button class="col m-0 btn btn-info btn-sm">View</button>
      </div>
    </div>
  </div>
</div>
<div class="col">
  <div class="card w-100 h-100" style="width: 25rem;">
    <div class="card-body bg-light">
      <h5 class="card-title text-center">Recommended Books</h5>
    </div>
    <div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
      <p class="p-3 mr-2">1</p>
      <div>
        <a class="fancybox" href="admin/files/Images/Networking_Security.png">
          <img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
        </a>
      </div>
      <div class="card-body">
        <p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
        <span class="col m-0">Views: 28</span>
        <button class="col m-0 btn btn-info btn-sm">View</button>
      </div>
    </div>
    <div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
      <p class="p-3 mr-2">2</p>
      <div>
        <a class="fancybox" href="admin/files/Images/Networking_Security.png">
          <img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
        </a>
      </div>
      <div class="card-body">
        <p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
        <span class="col m-0">Views: 28</span>

        <button class="col m-0 btn btn-info btn-sm">View</button>
      </div>
    </div>
    <div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
      <p class="p-3 mr-2">3</p>
      <div>
        <a class="fancybox" href="admin/files/Images/Networking_Security.png">
          <img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
        </a>
      </div>
      <div class="card-body">
        <p class="col m-0" style="font-size: 1rem; ">Library Management System</p>.
        <span class="col m-0">Views: 28</span>
        <button class="col m-0 btn btn-info btn-sm">View</button>
      </div>
    </div>
    <div class="card-img-top d-flex align-items-top bg-light p-2 px-3">
      <p class="p-3 mr-2">4</p>
      <div>
        <a class="fancybox" href="admin/files/Images/Networking_Security.png">
          <img src="admin/files/Images/Networking_Security.png" style="width: 100px; height: 100px">
        </a>
      </div>
      <div class="card-body">
        <p class="col m-0" style="font-size: 1rem; ">Library Management System</p>
        <span class="col m-0">Views: 28</span>

        <button class="col m-0 btn btn-info btn-sm">View</button>
      </div>
    </div>
  </div>
</div>
</div>