Блог

Как я могу настроить корпуса карт, чтобы они не имели одинаковой высоты. Как вы можете видеть на скриншоте ниже, карты имеют одинаковую высоту, в результате чего первые две выглядят непрофессионально. Я хочу, чтобы они выглядели следующим образом: .

Контур первых двух карт с точки зрения высоты растянут, и это выглядит глупо. Как я могу настроить их контур, чтобы они выглядели как на изображении выше с красным контуром?

 <div class="container">
         <div class="card-deck mb-3 text-center">
            <div class="card mb-4 box-shadow">
               <div class="card-header">
                  <h4 class="my-0 font-weight-normal">Multi car savings <i class="fas fa-car"></i></h4>
               </div>
               <div class="card-body">
                  <ul class="list-unstyled mt-3 mb-4">
                     <li class="list-group-item">2 cars £50</li>
                     <li class="list-group-item">3 cars £70</li>
                     <li class="list-group-item">5 cars £100</li>
                  </ul>
                  <a href="#mc_embed_signup" class="btn btn-lg btn-block btn-primary">12</a>
               </div>
            </div>
            <div class="card mb-4 box-shadow">
               <div class="card-header">
                  <h4 class="my-0 font-weight-normal">Armed forces amp; NHS <i class="fas fa-address-card"></i></h4>
               </div>
               <div class="card-body">
                  <ul class="list-unstyled mt-3 mb-4">
                     <li class="list-group-item">10% off for armed forces from the final quoted price</li>
                     <li class="list-group-item">10% off for NHS staff members from the final quoted price</li>
                  </ul>
                  <button type="button" class="btn btn-lg btn-block btn-primary">Sign up for discounts</button>
               </div>
            </div>
            <div class="card mb-4 box-shadow">
               <div class="card-header">
                  <h4 class="my-0 font-weight-normal">Car Clubs <i class="fas fa-car"></i></h4>
               </div>
               <div class="card-body">
                  <ul class="list-unstyled mt-3 mb-4">
                     <p class="text-uppercase text-dark font-weight-bold">Only applies to CCK small stickers</p>
                     <li class="list-group-item">5% off £100</li>
                     <li class="list-group-item">10% off £200</li>
                     <li class="list-group-item">15% off £300</li>
                  </ul>
                  <ul class="list-unstyled mt-3 mb-4">
                     <p class="text-uppercase text-dark font-weight-bold">Only Large to CCK small stickers</p>
                     <li class="list-group-item">5% off £100</li>
                     <li class="list-group-item">10% off £200</li>
                     <li class="list-group-item">15% off £300</li>
                  </ul>
                  <button type="button" class="btn btn-lg btn-block btn-primary">Sign up for discounts</button>
               </div>
            </div>
         </div>
  

Используйте это в контейнере cards

 .card-deck {
    align-items: flex-start;
}