Equal Height Bootstrap Cards Within Slick Carousel

Equal Height Bootstrap Cards within Slick Carousel

Equal height has been a problem for a lot of developers over the years.
In my opinion you can choose between 2 different solutions:

  1. Javascript solution

You loop over all the cards and save the biggest height. Set all cards to this height with JS after biggest one has been defined.

https://www.bootply.com/LnwZjxWe7L

// Get cards
var cards = $('.card-body');
var maxHeight = 0;

// Loop all cards and check height, if bigger than max then save it
for (var i = 0; i < cards.length; i++) {
if (maxHeight < $(cards[i]).outerHeight()) {
maxHeight = $(cards[i]).outerHeight();
}
}
// Set ALL card bodies to this height
for (var i = 0; i < cards.length; i++) {
$(cards[i]).height(maxHeight);
}

  1. CSS only solution

This one is a bit more complex to explain so here is an example how to do it:

#container3 {    float:left;    width:100%;    background:green;    overflow:hidden;    position:relative;}#container2 {    float:left;    width:100%;    background:yellow;    position:relative;    right:30%;}#container1 {    float:left;    width:100%;    background:red;    position:relative;    right:40%;}#col1 {    float:left;    width:26%;    position:relative;    left:72%;    overflow:hidden;}#col2 {    float:left;    width:36%;    position:relative;    left:76%;    overflow:hidden;}#col3 {    float:left;    width:26%;    position:relative;    left:80%;    overflow:hidden;}
<div id="container3"> <!-- added -->    <div id="container2"> <!-- added -->        <div id="container1">            <div id="col1">Column 1</div>            <div id="col2">Column 2</div>            <div id="col3">Super long text! Wow looks at this text, it is so long it needs to break on multiple lines!</div>        </div>    </div> <!-- added --></div> <!-- added -->

Slick carousel - force slides to have the same height

Add a couple of CSS styles and it will be ready:

.slick-track
{
display: flex !important;
}

.slick-slide
{
height: inherit !important;
}

Enjoy! :-)

How to adjust the height of slides in Slick slideshow to be equal?

Add this:

.simple cite {
margin: 0 auto;
}
.slick-track {
display:flex;
}

.carousel {
height:inherit;
}

That should work fine.

Slick slider same height images within nested flexbox

There are a few reasons your slider items are different heights.

  • You used padding-top to create a aspect-ratio height, but you set different percentages to the slider items, this should be equal for all.
  • The slider content affects the divs height, to prevent this you should make it position absolute within the slider element.

I created this pen for you, this might help you understand:

https://codepen.io/joostm020/pen/WMYmZv

html,body {  font-family: Arial;  font-size: 1vw;}
.slider { width: 100%; display: inline-flex;}.slide { position: relative; width: 33.33%; padding-bottom: 20%; margin: 5px; background-color: grey; background-position: center; background-repeat: no-repeat; background-size: contain; /* Try cover for no ugly borders! */}.slide .slide-content { position: absolute; bottom: 0; width: 100%;}
#slide1 { background-image: url(http://placehold.it/400x300); }#slide2 { background-image: url(http://placehold.it/500x200); }#slide3 { background-image: url(http://placehold.it/740x1000); }
<div class="slider">  <div class="slide" id="slide1">    <div class="slide-content">      <h1>Lorem ipsum!</h1>      <p>Donec blandit ullamcorper libero non fermentum. Etiam tincidunt ligula vitae lacus mattis, quis luctus felis viverra. Donec blandit ullamcorper libero non fermentum. Etiam tincidunt ligula vitae lacus mattis.</p>    </div>  </div>  <div class="slide" id="slide2">    <div class="slide-content">      <h1>Lorem ipsum!</h1>      <p>Donec blandit ullamcorper libero non fermentum. Etiam tincidunt ligula vitae lacus mattis, quis luctus felis viverra.</p>    </div>  </div>  <div class="slide" id="slide3">    <div class="slide-content">      <h1>Lorem ipsum!</h1>      <p>Donec blandit ullamcorper libero non fermentum.</p>    </div>  </div></div>


Related Topics



Leave a reply



Submit