Looking to enhance the website for the electronics store I am employed at, I have encountered a challenge while constructing cards using Bootstrap 5. Initially, the cards varied in height until I managed to resolve the issue by setting the card height to 100%. The persisting problem lies with the card-footer component. I aim to position this element at the bottom of each card consistently. The footer comprises the SKU and price of each item, but they do not align at the bottom as intended. For reference, you can view a similar website here.
If anyone can offer assistance, I am genuinely perplexed by this issue. Here is the code snippet for review:
.c-item {
height:480px;
}
.c-img {
height:100%;
object-fit:cover;
filter:brightness(0.6);
}
.c-card {
height:100%;
}
...
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f3919c9c878087819283b3c6ddc0ddc0">[email protected]</a>/dist/css/bootstrap.min.css">
<script src="https://kit.fontawesome.com/83bf0669d4.js" crossorigin="anonymous"></script>
<div class="col-md-12 col-lg-3 mb-4 mb-lg-0">
<div class="card bg-white text-black h-100">
...
Despite my attempts to standardize the logo and product image sizes, the varying descriptions are causing alignment issues. I have experimented with various methods, from adjusting sizes to adding spacing, but none have proven successful. While I am relatively new to this, I find joy in the process of crafting this site. Additionally, I have explored older Bootstrap 4 elements in hopes of rectifying the issue but to no avail.