0

This is officially my first question I've asked. I spent nearly a day trying to figure this out, so if anyone could help me I would really appreciate it! :D

Anyway, I'm trying to use Slick's carousel with Bootstrap, and whenever I use the class 'slick-slider' where I need class 'card-group' also, the alignment of the bottom 'Add to Cart' button and above buttons don't align properly.

<div class='slick-slider card-group'>

This is a code snippet of the card-group and 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>

      <div class="card border-0" style="width: 18rem;">
        <img class="card-img-top" src="static/img/person2.jpg" alt="Card image cap">
        <div class="card-body d-flex flex-column">
          <h5 class="card-title sm-1">Lorem ipsum.</h5>
          <p class="card-text sm-2">Lorem ipsum dolor.</p>
          <p class="card-text text-primary sm-3">Lorem ipsum.</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>
      <div class="card border-0" style="width: 18rem;">
        <img class="card-img-top" src="static/img/person3.jpg" alt="Card image cap">
        <div class="card-body d-flex flex-column">
          <h5 class="card-title sm-1">Lorem ipsum dolor.</h5>
          <p class="card-text sm-2">Lorem ipsum dolor sit.</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>
      <div class="card border-0" style="width: 18rem;">
        <img class="card-img-top" src="static/img/person4.jpg" alt="Card image cap">
        <div class="card-body d-flex flex-column">
          <h5 class="card-title sm-1">Lorem ipsum.</h5>
          <p class="card-text sm-2">Lorem ipsum dolor.</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>





    </div>


</section>

Below, are the pics with slick-slider class, and without (both with card-group).

What I'm trying to achieve with Slick: pic link enter image description here

What keeps happening that I don't want: pic2 link enter image description here

Thanks in advance!

Devin B.
  • 433
  • 4
  • 18

1 Answers1

0

The issue is not with Slick or Bootstrap. You have 2 types of slides, a slide where you added 3 elements: - div with a class of container - div with a class of card-body - div with a class of card-footer and in other slides you have a second type where you added also 3 elements : - 2xdivs with a class of card-body - div with a class of card-footer

your slides height comes from their content, and since card-body class have different content from slide to another the height of the whole slide changes so you can give card-body class a fixed min-height to keep the slides height fixed along all other slides and give the same min-height rule to the container class to get same height for all slides. I added those 2 rules to this here

 min-height:12em;
 height: 100%;

Change the min-height based on the max height of your slides.

Majid Eltayeb
  • 558
  • 4
  • 16
  • Unfortunately, that did not work. I'm still curious though, trying to figure out how to best troubleshoot, as I've tried everything from every thread I could scour.. why is it when I disable the class 'slick-slider' from the div that 'card-group' suddenly aligns everything the way I want it to? :( – Devin B. Aug 10 '18 at 01:33
  • okay , could you provide a link to codepen or something ? we could find a solution for that – Majid Eltayeb Aug 10 '18 at 12:21
  • Apologies for the delayed response. So it took me a little bit of time to try and recreate the issue in codepen, but here is the link: https://codepen.io/devbaggett/pen/GXJvLB – Devin B. Aug 23 '18 at 01:18