Expected behavior: same height for all cards
(all cards should adjust their height to the highest card)
Actual behavior: height depends on text length
Snippet: https://mdbootstrap.com/snippets/jquery/temp/3565823
Asked
Active
Viewed 1,935 times
-2
-
Can you share code here? – MagnusEffect Dec 30 '21 at 09:43
-
@MohitMaroliyaB17CS036 you can try in the snippet i sent, it needs to use mdb-bootstrap – qonfuimbqcwwshjymh Dec 30 '21 at 09:43
-
Its not opening – MagnusEffect Dec 30 '21 at 09:44
-
@MohitMaroliyaB17CS036 my bad, updated the link. – qonfuimbqcwwshjymh Dec 30 '21 at 09:46
-
1@GlebKemarsky please do not transcribe substantive code from off-site locations unless the off-site location explicitly allows for that via its license. Otherwise it is OP's responsibility/prerogative to do so. – TylerH Jan 06 '22 at 20:54
-
@TylerH Thanks for your feedback! I realized my mistake. But duplication is not assigned correctly. The question is how to align the height of the carousel slides. Aligning the columns is not enough. – Gleb Kemarsky Jan 07 '22 at 10:57
2 Answers
0
Adding style="min-height:300px" to each of the card-text
Please use this code:
<div class="container my-4">
<p class="font-weight-bold">Bootstrap carousel multiple items is an improved version of the standard bootstrap
carousel which allows you to put inside more than one element.</p>
<p><strong>Detailed documentation and more examples of Bootstrap grid you can find in our <a href="https://mdbootstrap.com/docs/standard/components/carousel/"
target="_blank">Bootstrap Carousel Docs</a>.</p>
<p>See also <a target="_blank" href="https://mdbootstrap.com/docs/standard/plugins/multi-item-carousel/"><strong>Advanced mutli item carousel plugin</strong></a> or <a target="_blank" href="https://mdbootstrap.com/snippets/standard/mdbootstrap/2904002"><strong>multi-item carousel example for the newest Bootstrap 5</strong></a>.</p>
<hr class="mt-5">
<p>Built with <a target="_blank" href="https://mdbootstrap.com/docs/standard/">Material Design for Bootstrap</a> - free and powerful Bootstrap UI KIT</p>
<a class="btn btn-primary me-2" href="https://mdbootstrap.com/docs/standard/getting-started/installation/" target="_blank" role="button">Download MDB UI KIT <i class="fa fa-download"></i></a>
<a class="btn btn-danger me-2" target="_blank" href="https://mdbootstrap.com/docs/standard/" role="button">Learn more</a>
<a class="btn btn-success me-2" target="_blank" href="https://mdbootstrap.com/docs/standard/getting-started/" role="button">Tutorials</a>
<a class="btn btn-dark me-2" target="_blank" href="https://github.com/mdbootstrap/mdb-ui-kit" role="button">GitHub <i class="fa fa-github ms-2"></i></a>
<hr class="mb-5"/>
<!--Carousel Wrapper-->
<div id="multi-item-example" class="carousel slide carousel-multi-item" data-ride="carousel">
<!--Controls-->
<div class="controls-top">
<a class="btn-floating" href="#multi-item-example" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
<a class="btn-floating" href="#multi-item-example" data-slide="next"><i class="fa fa-chevron-right"></i></a>
</div>
<!--/.Controls-->
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="#multi-item-example" data-slide-to="0" class="active"></li>
<li data-target="#multi-item-example" data-slide-to="1"></li>
<li data-target="#multi-item-example" data-slide-to="2"></li>
</ol>
<!--/.Indicators-->
<!--Slides-->
<div class="carousel-inner" role="listbox">
<!--First slide-->
<div class="carousel-item active">
<div class="row">
<div class="col-md-4">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg"
alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text" style="min-height:300px">Some quick example text to build on the card title and make up the bulk of the
card's content.Some quick example text to build on the card title and make up the bulk of the
card's content.Some quick example text to build on the card title and make up the bulk of the
card's content.</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-md-4 clearfix d-none d-md-block">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg"
alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text" style="min-height:300px">Some quick example text to build on the card title and make up the bulk of the
card's content.</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-md-4 clearfix d-none d-md-block">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg"
alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text" style="min-height:300px">Some quick example text to build on the card title and make up the bulk of the
card's content.</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
</div>
</div>
<!--/.First slide-->
<!--Second slide-->
<div class="carousel-item">
<div class="row">
<div class="col-md-4">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(60).jpg"
alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text" style="min-height:300px">Some quick example text to build on the card title and make up the bulk of the
card's content.</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-md-4 clearfix d-none d-md-block">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(47).jpg"
alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text" style="min-height:300px">Some quick example text to build on the card title and make up the bulk of the
card's content.Some quick example text to build on the card title and make up the bulk of the
card's content.</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-md-4 clearfix d-none d-md-block">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(48).jpg"
alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text" style="min-height:300px">Some quick example text to build on the card title and make up the bulk of the
card's content.</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
</div>
</div>
<!--/.Second slide-->
<!--Third slide-->
<div class="carousel-item">
<div class="row">
<div class="col-md-4">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Food/4-col/img%20(53).jpg"
alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text" style="min-height:300px">Some quick example text to build on the card title and make up the bulk of the
card's content.Some quick example text to build on the card title and make up the bulk of the
card's content.</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-md-4 clearfix d-none d-md-block">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Food/4-col/img%20(45).jpg"
alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text" style="min-height:300px">Some quick example text to build on the card title and make up the bulk of the
card's content.Some quick example text to build on the card title and make up the bulk of the
card's content.Some quick example text to build on the card title and make up the bulk of the
card's content.</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-md-4 clearfix d-none d-md-block">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Food/4-col/img%20(51).jpg"
alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text" style="min-height:300px">Some quick example text to build on the card title and make up the bulk of the
card's content.</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
</div>
</div>
<!--/.Third slide-->
</div>
<!--/.Slides-->
</div>
<!--/.Carousel Wrapper-->
</div>
MagnusEffect
- 3,363
- 1
- 16
- 41
-
I want it to be responsive.. Not give it a `min-height:300px `. Maybe the text card is larger than `300px; ` – qonfuimbqcwwshjymh Dec 30 '21 at 10:40
-
Then change the `px` to `%` and select the value as per your need. like `90%`. You can change the height of the card as per your need also. – MagnusEffect Dec 30 '21 at 10:42
-
Is there a possibility to always make it as large as the biggest card? – qonfuimbqcwwshjymh Dec 30 '21 at 10:43
-
Make height of all the card to that of the height of largest card – MagnusEffect Dec 30 '21 at 10:46
-
-
For responsiveness, you can use `media-queries` and let it be a fixed quantity. – MagnusEffect Dec 30 '21 at 10:50
-
-
**Is there a possibility to always make it as large as the biggest card?** – qonfuimbqcwwshjymh Dec 30 '21 at 10:58
-
Make height of all the card to that of the height of largest card . For this you have to use styling? – MagnusEffect Dec 30 '21 at 11:00
-
-
how can i "Make height of all the card to that of the height of largest card" with css or bootstrap – qonfuimbqcwwshjymh Dec 30 '21 at 11:06
0
Note: Here in the snippets I'm using the sm breakpoint to make the result visible without the full screen mode. The code in the MDB and CodePen sandboxes uses the original md breakpoint.
Step 1. Adjust the height of cards on one slide
- Turn nested blocks
.cardand.card-bodyinto flex-boxes with a column direction. - Add the
flex-grow: 1;property to the.card-bodyblock so that it occupies all the available height. - Assign the same property to the
.card-textblock so that it presses the buttons to the bottom edge of the cards and thus aligns them.
I prefer to achieve this with CSS so that I don't have to repeat the same utility classes for all the blocks involved. But for the .col-... blocks I have used the utility classes .d-flex, .d-none and .d-sm-flex, because they play here one more role: they also change the cards visibility according to the screen width.
Also I've removed the .clearfix class because it creates extra pseudo-elements and I see no reason to use this hear.
.carousel-equal-heights .carousel-item .card,
.carousel-equal-heights .carousel-item .card-body {
display: flex;
flex-direction: column;
}
.carousel-equal-heights .carousel-item .card-body,
.carousel-equal-heights .carousel-item .card-text {
flex-grow: 1;
}<div class="container my-4">
<div class="carousel-equal-heights">
<div class="carousel-item active">
<!--Content of a slide-->
<div class="row">
<div class="col-sm-4 d-flex">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-sm-4 d-none d-sm-flex">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-sm-4 d-none d-sm-flex">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">Step 2. Adjust the height of the slides
Unfortunately, this approach doesn't work for slides. Inactive slides get the display: none; property and the .carousel-inner container always changes its height to match the height of the active slide.
In this situation we can use JS:
- Calculate the height of the highest and set it for all carousel slides.
- Update these values if the browser window resizes.
- Also add the
height: 100%;property to the.rowblock on each slide.
Check the solution on MDB and CodePen.
$(document).ready(function() {
let $carouselItems = $('.carousel-equal-heights').find('.carousel-item');
updateItemsHeight();
$(window).resize(updateItemsHeight);
function updateItemsHeight() {
// remove old value
$carouselItems.height('auto');
// calculate new one
let maxHeight = 0;
$carouselItems.each(function() {
maxHeight = Math.max(maxHeight, $(this).outerHeight());
});
// set new value
$carouselItems.each(function() {
$(this).outerHeight(maxHeight);
});
// debug it
console.log('new items height', maxHeight);
}
});.carousel-equal-heights .carousel-item > .row {
height: 100%;
}
.carousel-equal-heights .carousel-item .card,
.carousel-equal-heights .carousel-item .card-body {
display: flex;
flex-direction: column;
}
.carousel-equal-heights .carousel-item .card-body,
.carousel-equal-heights .carousel-item .card-text {
flex-grow: 1;
}<div class="container my-4">
<!--Carousel Wrapper-->
<div id="multi-item-example" class="carousel slide carousel-multi-item carousel-equal-heights" data-ride="carousel">
<!--Controls-->
<div class="controls-top">
<a class="btn-floating" href="#multi-item-example" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
<a class="btn-floating" href="#multi-item-example" data-slide="next"><i class="fa fa-chevron-right"></i></a>
</div>
<!--/.Controls-->
<!--Slides-->
<div class="carousel-inner" role="listbox">
<!--First slide-->
<div class="carousel-item active">
<div class="row">
<div class="col-sm-4 d-flex">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(34).jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-sm-4 d-none d-sm-flex">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(18).jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-sm-4 d-none d-sm-flex">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(35).jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
</div>
</div>
<!--/.First slide-->
<!--Second slide-->
<div class="carousel-item">
<div class="row">
<div class="col-sm-4 d-flex">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(60).jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-sm-4 d-none d-sm-flex">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(47).jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-sm-4 d-none d-sm-flex">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/City/4-col/img%20(48).jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
</div>
</div>
<!--/.Second slide-->
<!--Third slide-->
<div class="carousel-item">
<div class="row">
<div class="col-sm-4 d-flex">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Food/4-col/img%20(53).jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-sm-4 d-none d-sm-flex">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Food/4-col/img%20(45).jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-sm-4 d-none d-sm-flex">
<div class="card mb-2">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Food/4-col/img%20(51).jpg" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a class="btn btn-primary">Button</a>
</div>
</div>
</div>
</div>
</div>
<!--/.Third slide-->
</div>
<!--/.Slides-->
</div>
<!--/.Carousel Wrapper-->
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>
Gleb Kemarsky
- 10,160
- 7
- 43
- 68