Topic: Cards of same height and footer bottom alignment

ales pro asked 6 years ago

Hi, how would one adjust the cards to the same height and move footers to bottom in the following case: Demo cards. Just point me to the link in the manual where you explain it. I couldn't find it myself. Ales

rangrage free answered 5 years ago


I have tried the example above using MDB 4.4.1, I've changed the card-block to card-body etc. but it is making all cards stretch beyond the screen height.

Can you please let me know if this still works for MDB 4.4.1? I am using twig for the template, if that makes any difference.

P.S. It would be nice if we could simply add a "match-height" class on a card.

Marta Wierzbicka staff answered 5 years ago

Hi, could you provide any file with your code and send me one here: Describe in details your problem and attach file with your code an I'll help you. Best, Marta

mshallop pro answered 5 years ago

Hi Marta - I am having a similar problem - where my footer isn't forced to the page-bottom on pages where there's light content. I tried the above css fix (sans height) but no luck. Any advice? thanks! --mike

ales pro answered 6 years ago

Thanks, Marta. You're providing great service, keep it up! Aleš

Marta Wierzbicka staff answered 6 years ago

Hi, we don't have a manual where we explain this, so I tell you here. Add this code to your CSS:

    .card {
        height: 100%;
        display: flex;

    .card-block {
        display: flex;
        justify-content: space-between;
        flex-direction: column;

    .card.card-footer {
        align-self: flex-end;
        flex: 1 1 auto;
And then you need to add one <div> in your card like here:
            <div class="card card-cascade wider">

                <!--Card image-->
                <div class="view overlay hm-white-slight">
                    <img src="" class="img-fluid" alt="">
                        <div class="mask waves-effect waves-light"></div>
                <!--/.Card image-->

                <!--Card content-->
                <div class="card-block text-center">
                    <div class="mb-1">
                        <!--Category & Title-->
                        <a href="" class="text-muted"><h5>Shoes</h5></a>
                        <h4 class="card-title"><strong><a href="">Pink sneakers</a></strong></h4>
                        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing minima veniam elit. Nam incidunt eius est voluptatibus.

                    <!--Card footer-->
                    <div class="card-footer">
                        <span class="left">39$</span>
                        <span class="right">
                        <a class="" data-toggle="tooltip" data-placement="top" title="Quick Look"><i class="fa fa-eye"></i></a>
                        <a class="" data-toggle="tooltip" data-placement="top" title="Add to Wishlist"><i class="fa fa-heart"></i></a>

                <!--/.Card content-->

Best, Marta

aliveli free commented 5 years ago

Hello Marta, I've tried the steps you've provided but the button on the card-footer is not going to the bottom.

Marta Wierzbicka staff commented 5 years ago

Hi, I see the code but I don't see your demo, could you provide one here? Best, Marta

aliveli free commented 5 years ago

Hello Marta, You can check this website:

Marta Wierzbicka staff commented 5 years ago

Hi, try the code from here: .

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes