How do I get all my bootstrap cards the same length?

Question

I am trying to get all my bootstrap cards the same length but they are varying in length and width. I resized all photos to have a length of 429. This is the code and the styling that may be affecting it.

 <div class="container text-center" style="background-color: pink; border: none;">
        <div class="row">
            <div class="col">
                <div id="CP1" class="card" >
                    <img src="/images/big-blue-monster-stuffed-cookies.jpeg" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 id="title1" class="card-title">Blue Monster Stuffed Cookies</h5>
                        <p id="price1" class="card-text">$5</p>
                        <a href="checkout.html" class="btn btn-primary add-cart">Add to cart</a>
                    </div>
                </div>
            </div>
            <div class="col">
                <div id="CP2" class="card" >
                    <img src="/images/cookies-and-cream-cookies .jpeg" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 id="title2" class="card-title">Cookies and Cream Cookies</h5>
                        <p id="price2" class="card-text">$5</p>
                        <a href="checkout.html" class="btn btn-primary add-cart">Add to cart</a>
                    </div>
                </div>
            </div>
            <div class="col">
                <div id="CP3" class="card" >
                    <img src="/images/strawberry-shortcake-cookies.jpeg" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 id="title3" class="card-title">Strawberry Shortcake Cookies</h5>
                        <p id="price3" class="card-text">$5</p>
                        <a href="checkout.html" class="btn btn-primary add-cart">Add to cart</a>
                    </div>
                </div>
            </div>
            <div class="col">
                <div id="CP4" class="card" >
                    <img src="/images/cinammon-almond-cookies.jpeg" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 id="title4" class="card-title">Cinnamon Almond Cookies</h5>
                        <p id="price4" class="card-text">$5</p>
                        <a href="checkout.html" class="btn btn-primary add-cart">Add to cart</a>
                    </div>
                </div>
            </div>
       
    

    
        
            <div class="col">
                <div id="CP5" class="card" style="width: 18rem;">
                    <img src="/images/product-page-s'more-cookies.jpeg" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 id="title5" class="card-title">Smore Cookies</h5>
                        <p id="price5" class="card-text">$5</p>
                        <a href="checkout.html" class="btn btn-primary add-cart">Add to cart</a>
                    </div>
                </div>
            </div>
            <div class="col">
                <div id="CP6" class="card" >
                    <img src="/images/mint-chocolate-chip.jpeg"
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 id="title6" class="card-title">Mint Chocolate Chip Cookies </h5>
                        <p id="price6" class="card-text">$5</p>
                        <a href="checkout.html" class="btn btn-primary add-cart">Add to cart</a>
                    </div>
                </div>
            </div>
            <div class="col">
                <div id="CP7" class="card" >
                    <img src="/images/rocky-road-chocolate-cookies.jpeg" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 id="title7" class="card-title">Rocky Road Chocolate Chip Cookies</h5>
                        <p id="price7" class="card-text">$5</p>
                        <a href="checkout.html" class="btn btn-primary add-cart">Add to cart</a>
                    </div>
                </div>
            </div>
            <div class="col">
                <div id="CP8" class="card">
                    <img src="/images/peanut-butter-chocolate-chip.jpeg" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 id="title8" class="card-title">Peanut Butter Chocolate Chip Cookies</h5>
                        <p id="price8" class="card-text">$5</p>
                        <a href="checkout.html" class="btn btn-primary add-cart">Add to cart</a>
                    </div>
                </div>
            </div>
          </div>
    </div>
  

Styling

`.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  margin: 0 -16px;
} 
 
  
  .col-25 {
    -ms-flex: 25%; /* IE10 */
    flex: 25%;
  }
  
  .col-50 {
    -ms-flex: 50%; /* IE10 */
    flex: 50%;
  }
  
  .col-75 {
    -ms-flex: 75%; /* IE10 */
    flex: 75%;
  }
  
  .col-25,
  .col-50,
  .col-75 {
    padding: 0 16px;
  }
  
  .container {
    background-color: lightpink;
  `

I have tried setting the classes card,card-title,card-body to height 100% and setting a min-height on the card title class