Equal Height Cards with Buttons always at the bottom?

[alivelimeli]

Hi,

I have implemented the card deck styling on the following page – http://digitaltestsite2.biz/ Whats the simplest way of using css or js to ensure the buttons are always inline at the bottom of the cards?

Thanks in advance.

[alivelimeli]

Any updates?

[Martussky]

Hi,

try this code:

    <div class="row my-5">

        <!-- Grid column -->
      <div class="col-md-4 d-flex mb-3">

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

                <!-- Card image -->
            <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(121).jpg" alt="[item-description]" class="img-fluid">

                <!-- Card content -->
            <div class="card-body d-flex flex-column">

                <!-- Title -->
                <h4 class="card-title">Card title</h4>
                <!-- Text -->
                <p class="card-text mb-auto"> Description Text. Lots and lots of great content about a particular part. Description Text. Lots and lots of great content about a particular part. Description Text. Lots and lots of great content about a particular part. Description Text. Lots and lots of great content about a particular part.</p>
                <!-- Button -->
                <div class="text-center mt-auto pt-3">
                  <a href="#" class="btn btn-primary">Button</a>
                </div>

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

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

      </div>
      <!-- Grid column -->

        <!-- Grid column -->
      <div class="col-md-4 d-flex mb-3">

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

                <!-- Card image -->
            <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(31).jpg" alt="[item-description]" class="img-fluid">

                <!-- Card content -->
            <div class="card-body d-flex flex-column">

                <!-- Title -->
                <h4 class="card-title">Card title</h4>
                <!-- Text -->
                <p class="card-text mb-auto"> Description Text. Lots and lots of great content about a particular part. </p>
                <!-- Button -->
                <div class="text-center mt-auto pt-3">
                  <a href="#" class="btn btn-primary">Button</a>
                </div>

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

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

      </div>
      <!-- Grid column -->

        <!-- Grid column -->
      <div class="col-md-4 d-flex mb-3">

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

                <!-- Card image -->
            <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(88).jpg" alt="[item-description]" class="img-fluid">

                <!-- Card content -->
            <div class="card-body d-flex flex-column">

                <!-- Title -->
                <h4 class="card-title">Card title</h4>
                <!-- Text -->
                <p class="card-text mb-auto"> Description Text. Lots and lots of great content about a particular part. Description Text. Lots and lots of great content about a particular part.</p>
                <!-- Button -->
                <div class="text-center mt-auto pt-3">
                  <a href="#" class="btn btn-primary">Button</a>
                </div>

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

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

      </div>
      <!-- Grid column -->

    </div>
    <!-- Grid row -->

[alivelimeli]

@Martussky , it didn't worked.

My code is like this one and buttons are not at bottom for each card:

                <!--Grid row-->
                <div class="row d-flex">

                    <!--Grid column-->
                    <div class="col-lg-3 col-md-6 mb-r d-flex">

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

                            <!--Card image-->
                            <div class="view overlay hm-white-slight">
                                                                <a href="#" class="img-fluid" width="234" height="234" alt="mytitle"></a>
                                <a href="#" alt="mytitle">
                                    <div class="mask"></div>
                                </a>
                            </div>
                            <!--Card image-->

                            <!--Card content-->
                            <div class="card-body">
                                <!--Category & Title-->
                                <p><a href="" class="grey-text float-left">
                                    <h6><a href="#">site.com</a></h6>
                                </a></p>
                                <br />
                                <h5 class="card-title">
                                    <strong>
                                        <a href="#">mytitle</a>
                                    </strong>
                                </h5>

                                <a>
                                                                        <span class="badge badge-info" onclick="javascript:window.location='#">Best Price</span>
                                                                    </a>

                                <!--Description-->
                                <p class="card-text">

Long long text Long long text Long long text Long long text Long long text Long long text Long long text Long long text                                 </p>

                                <!--Card footer-->
                                <div class="card-footer ">
                                    <span class="left float-left font-bold">
                                        <strong>$11.05</strong>
                                    </span>

                                    <span class="right float-right">
                                        <!--Rating-->
                                        <i class="fa fa-thumbs-up"></i>&nbsp;
                                    </span>

                                    <br />
                                    <a class="btn btn-unique waves-effect waves-light" href="#">View More</a>
                                </div>

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

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

                    </div>
                    <!--Grid column-->

Any suggestions?

[Martussky]

In which version of MDB it doesn't work? Please, tell me what version of MDB you have.

[alivelimeli]

Latest version, I guess 4.4.3

[Martussky]

So try this one:

`

site.com

mytitle

Best Price

Long long text Long long text Long long text Long long text Long long text Long long text Long long text Long long text

$11.05  

View More

site.com

mytitle

Best Price

Long long text Long long text Long long text Long long text Long long text Long long text Long long text Long long text Long long text Long long text Long long text Long long text Long long text Long long text Long long text Long long text Long long text Long long text Long long text Long long text Long long text Long long text Long long text Long long text Long long text Long long text Long long text Long long text Long long text Long long text Long long text Long long text

$11.05  

View More

        <!--Grid row-->`

[alivelimeli]

Hello @Martussky ,

Thanks for the answer. Thats perfect, now buttons are at the bottom (its not changing depending on content)

Now another problem occured. As my cards are cascading they are overlapped.

Check the screenshot:

Do you have any suggestions for that?

Thanks

[Martussky]

Add this class .mt-4 to each of these lines <div class="card card-cascade narrower">.

[alivelimeli]

@Martussky, nothing changed. Still same overflowing..

[Martussky]

So, send me your whole file with the code to m.szymanska@mdbootstrap.com, because I don't know how it looks and I need to see the code to solve the problem.