Cards of same height and footer bottom alignment

Topic: Cards of same height and footer bottom alignment

ales pro asked 7 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

Add comment

rangrage free answered 7 years ago

1 0 Best answer

Hi,

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.

Add comment

Marta Wierzbicka staff answered 7 years ago

0 0 Best answer

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

Add comment

mshallop pro answered 7 years ago

0 0 Best answer

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

Add comment

ales pro answered 7 years ago

0 0 Best answer

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

Add comment

Marta Wierzbicka staff answered 7 years ago

1 0 Best answer

Hi,

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

<pre><code>
    .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;
    }</code></pre>

And then you need to add one <code><div></code> in your card like here:

<div class="view overlay hm-white-slight">
                    <img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/shoes%20(3).jpg" class="img-fluid" alt="">
                    <a>
                        <div class="mask waves-effect waves-light"></div>
                    </a>
                </div>

<div class="card-block text-center">
                    <div class="mb-1">
                        
                        <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.
                        </p>
                    </div>

<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>
                        </span>
                    </div>

</div>

</div>
            </code></pre>

Best,
Marta

Please insert min. 20 characters.

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:

<!--Card-->
            <div class="card card-cascade wider">

                <!--Card image-->
                <div class="view overlay hm-white-slight">
                    <img src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/shoes%20(3).jpg" class="img-fluid" alt="">
                    <a>
                        <div class="mask waves-effect waves-light"></div>
                    </a>
                </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>
                        
                        <!--Description-->
                        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing minima veniam elit. Nam incidunt eius est voluptatibus.
                        </p>
                    </div>

                    <!--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>
                        </span>
                    </div>

                </div>
                <!--/.Card content-->

            </div>
            <!--/.Card-->

Best, Marta

aliveli free commented 7 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. https://pastebin.com/U7xSKAcN

Marta Wierzbicka staff commented 7 years ago

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

aliveli free commented 7 years ago

Hello Marta, You can check this website: http://digitaltestsite2.biz/

Marta Wierzbicka staff commented 7 years ago

Hi, try the code from here: https://github.com/mdbootstrap/bootstrap-material-design/issues/125 .

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

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

ales

Pro User 12Support score
3Questions 5Answers 0Snippets