Today marks the beginning of my question asking journey. After dedicating almost a day to solving this, I humbly seek your assistance! :D
My current challenge involves using Slick's carousel alongside Bootstrap. Whenever I add the 'slick-slider' class where the 'card-group' class is also present, the alignment of buttons doesn't seem to work correctly.
<div class='slick-slider card-group'>
Here's a snippet of the code showcasing the card-group and individual cards:
<section id="slick-slider" class="py-5 med-1">
<div class='slick-slider card-group'>
<div class="card border-0" style="width: 18rem;">
<img class="card-img-top" src="static/img/person1.jpg" alt="Card image cap">
<div class="card-body d-flex flex-column">
<h5 class="card-title sm-1">Lorem.</h5>
<p class="card-text sm-2">Lorem ipsum dolor sit amet.</p>
<p class="card-text text-primary sm-3">Lorem.</p>
</div>
<div class="card-footer d-flex flex-column mt-auto">
<p class="text-muted small mb-0">Select:</p>
<div class="clearfix mb-2">
<button type="button" class="btn btn-outline-danger px-2 py-0 mb-1"><span class="small">4</span><br>$80</button>
<button type="button" class="btn btn-outline-danger px-2 py-0 mb-1"><span class="small">3</span><br>$50</button>
<button type="button" class="btn btn-outline-danger px-2 py-0 mb-1"><span class="small">2</span><br>$30</button>
<button type="button" class="btn btn-outline-danger px-2 py-0 mb-1"><span class="small">1</span><br>$20</button>
</div>
<a href="#" class="btn btn-primary">Add to Cart</a>
</div>
</div>
<!-- More card elements similar to above -->
</div>
</section>
Below are images illustrating the difference with and without the slick-slider class along with card-group.
Intended outcome with Slick: pic link https://i.sstatic.net/JRCaI.png
Unexpected result that needs fixing: pic2 link https://i.sstatic.net/F5z6A.png
Your help is greatly appreciated!