2

I have cards I'm building with a link at the end. What I want to do is have the links sit at the bottom of the div no matter what. Currently, They sit at the end of the text. Is there a simple way to achieve this?

I don't want to use a card footer if I can avoid it, I'd like to just align it at the bottom of the div that the product link sits in. Here's what it looks like now:

enter image description here

HTML

            <div class="card wow fadeIn swipe-away hover-shadow ">
                <img class="card-img-top" src="<?php the_sub_field('product_image'); ?>">
                <div class="card-body">
                    <h5 class="card-title"> <?php the_sub_field('product_name'); ?></h5>
                    <p class="card-text"> <?php the_sub_field('brief_description'); ?></p>
                    <a href="<?php the_sub_field('product_link'); ?>" class="h3 read-more-full btn hero-btn wow fadeIn btn-accent">View Strain</a>
                </div>

            </div>
M. Straw
  • 440
  • 12
  • 26
  • Does this answer your question? [CSS: fixed to bottom and centered](https://stackoverflow.com/questions/971123/css-fixed-to-bottom-and-centered) – Kundan Jul 15 '20 at 02:13

2 Answers2

5

You may want the card-body div to occupy 100% height to take up all the remaining space. Then if it was a flex box and the description element was set to grow it would push the button down. Not 100% sure about the bootstrap syntax for that but it may look like this:

 <div class="card-body d-flex flex-column h-100">
    <h5 class="card-title"> <?php the_sub_field('product_name'); ?></h5>
    <p class="card-text flex-grow-1"> <?php the_sub_field('brief_description'); ?></p>
    <a href="<?php the_sub_field('product_link'); ?>" class="h3 read-more-full btn hero-btn wow fadeIn btn-accent">View Strain</a>
 </div>
Vincent Ramdhanie
  • 102,349
  • 23
  • 137
  • 192
-2

By setting the position as absolute and bottom as 0px or by some small value.

<div style=position:absolute;bottom:10px;">
Sonal Jain
  • 1
  • 3