Topic: Cards Height / Alignment
On Page https://mdbootstrap.com/sections/e-commerce-sections/
What code should be added to make 3 cards to have exactly same height and also pictures within cards would be aligned at bottom ? Thanks a a lot .
Add comment
Marta Szymanska staff pro premium answered 7 years ago
Hi,
do you mean sth like this?
<!--Section: Products v.3--> <section class="section pb-3"> <!--Section heading--> <h1 class="section-heading h1 pt-4">Our bestsellers</h1> <!--Section description--> <p class="section-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p> <!--Grid row--> <div class="row"> <!--Grid column--> <div class="col-lg-4 col-md-6 mb-3 d-flex align-items-stretch"> <!--Card--> <div class="card"> <!--Card content--> <div class="card-body text-center no-padding"> <!--Category & Title--> <a href="" class="text-muted"><h5>Blouse</h5></a> <h4 class="card-title"><strong><a href="">White Blouse</a></strong></h4> <!--Description--> <p class="card-text">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam. </p> <!--Card footer--> <div class="card-footer"> <span class="left">59$ <span class="discount">199$</span></span> <span class="right"><a class="" data-toggle="tooltip" data-placement="top" title="Add to Wishlist"><i class="fa fa-heart"></i></a></span> </div> </div> <!--Card content--> <!--Card image--> <div class="view overlay hm-white-slight z-depth-1"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(36).jpg" class="img-fluid" alt=""> <a> <div class="mask"></div> </a> </div> <!--Card image--> </div> <!--Card--> </div> <!--Grid column--> <!--Grid column--> <div class="col-lg-4 col-md-6 mb-3 d-flex align-items-stretch"> <!--Card--> <div class="card"> <!--Card content--> <div class="card-body text-center no-padding"> <!--Category & Title--> <a href="" class="text-muted"><h5>Accessories</h5></a> <h4 class="card-title"><strong><a href="">Black hat</a></strong></h4> <!--Description--> <p class="card-text">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam. </p> <!--Card footer--> <div class="card-footer"> <span class="left">39$ <span class="discount">99$</span></span> <span class="right"><a class="active" data-toggle="tooltip" data-placement="top" title="Added to Wishlist"><i class="fa fa-heart"></i></a></span> </div> </div> <!--Card content--> <!--Card image--> <div class="view overlay hm-white-slight z-depth-1"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(37).jpg" class="img-fluid" alt=""> <a> <div class="mask"></div> </a> </div> <!--Card image--> </div> <!--Card--> </div> <!--Grid column--> <!--Grid column--> <div class="col-lg-4 col-md-6 mb-3 d-flex align-items-stretch"> <!--Card--> <div class="card"> <!--Card content--> <div class="card-body text-center no-padding"> <!--Category & Title--> <a href="" class="text-muted"><h5>Sweatshirt</h5></a> <h4 class="card-title"><strong><a href="">Flower sweatshirt</a></strong></h4> <!--Description--> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing minima veniam elit. Nam incidunt eius est voluptatibus. Lorem ipsum dolor sit amet, consectetur adipisicing minima veniam elit. Nam incidunt eius est voluptatibus. Lorem ipsum dolor sit amet, consectetur adipisicing minima veniam elit. Nam incidunt eius est voluptatibus. Lorem ipsum dolor sit amet, consectetur adipisicing minima veniam elit. Nam incidunt eius est voluptatibus. </p> <!--Card footer--> <div class="card-footer"> <span class="left">79$ <span class="discount">299$</span></span> <span class="right"><a class="" data-toggle="tooltip" data-placement="top" title="Add to Wishlist"><i class="fa fa-heart"></i></a></span> </div> </div> <!--Card content--> <!--Card image--> <div class="view overlay hm-white-slight z-depth-1"> <img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Vertical/img%20(38).jpg" class="img-fluid" alt=""> <a> <div class="mask"></div> </a> </div> <!--Card image--> </div> <!--Card--> </div> <!--Grid column--> </div> <!--Grid row--> </section> <!--Section: Products v.3-->
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Resolved
Specification of the issue
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: Yes