Cards of same height and footer bottom alignment

Topic: Cards of same height and footer bottom alignment

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

Marta Szymanska answered 10 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:


    .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 commented 9 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 Szymanska commented 9 years ago

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

aliveli commented 9 years ago

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

Marta Szymanska commented 9 years ago

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

Add comment

rangrage answered 9 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

ales pro answered 10 years ago

0 0 Best answer

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

Add comment

mshallop pro answered 9 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

Marta Szymanska answered 9 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

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

User: 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 likes 0Snippets