Rotating Card - text at bottom of front face of card

<div class="card-body">

<h4>Jonathan Doe</h4>

<p>Web developer</p>

<!--Triggering button-->

<a class="rotate-btn"data-card="card-1" (click)="cards.toggle()"><iclass="fa fa-repeat"></i> Click here to rotate</a>

<p class="text-right">Custom text</p>

</div>

Louw pro commented 7 years ago

Hi Damian, I've done that, but it only places the content at the end of the "Body" of the card, and not at the "bottom" of the card. My card has variable length content, and I'm looking at placing text right at the bottom of the card - a footer section, that is always on the bottom edge of the card. Thx

---

Damian Gemza staff commented 7 years ago

So place it outside of card-body div and set position: absolute and some bottom value. It cause, that your paragraph should stay in one place all the time. Best Regards, Damian

---

Louw pro commented 7 years ago

Hi Damian, Placing outside the card-body cause the text to display "outside" the rotating card canvas. After playing around with "flexbox", I've managed to get the desired result. <pre><mdb-card-rotating #card class="px-1"> <!--Front Side--> <div class="face front tp-box_side tp-box_front" > <!--Content--> <div class="card-body p-0 h-100 d-flex flex-column justify-content-start"> ..... <div class="h-100 ml-auto d-flex flex-column justify-content-end"><small>Custom Text</small></div> </div> </div> <!--/.Front Side--> <!--Back Side--> <div class="back tp-box_side tp-box_back" > <!--Content--> <!--/.Back Side--> </mdb-card-rotating></pre> Thanks for your assistance.

---