Align link to bottom of card in Bootstrap 4 [duplicate] - html

Question

This question already has an answer here:
Bootstrap 4 cards - align content at the bottom
(1 answer)
Closed 4 years ago.
I would like to align links to the bottom center of cards. I tried adding the classes d-flex and flex-column to .card-body and mt-auto to the link, as suggested elsewhere. Note I'm not using a container or container-fluid div class (Bootstrap documentation suggests going without one for an edge-to-edge design).
Relevant HTML (for full code view CodePen):
<div class="row portfolio">
<div class="col-sm-12">
<h2>Portfolio</h2>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/700x400" alt="">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Project One</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur eum quasi sapiente nesciunt? Voluptatibus sit, repellat sequi itaque deserunt, dolores in, nesciunt, illum tempora ex quae? Nihil, dolorem!</p>
View CodePen
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/700x400" alt="">
<div class="card-body">
<h4 class="card-title">Project Two</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
View CodePen
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/700x400" alt="">
<div class="card-body">
<h4 class="card-title">Project Three</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos quisquam, error quod sed cumque, odio distinctio velit nostrum temporibus necessitatibus et facere atque iure perspiciatis mollitia recusandae vero vel quam!</p>
View CodePen
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/700x400" alt="">
<div class="card-body">
<h4 class="card-title">Project Four</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
View CodePen
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/700x400" alt="">
<div class="card-body">
<h4 class="card-title">Project Five</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
View CodePen
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/700x400" alt="">
<div class="card-body">
<h4 class="card-title">Project Six</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque earum nostrum suscipit ducimus nihil provident, perferendis rem illo, voluptate atque, sit eius in voluptates, nemo repellat fugiat excepturi! Nemo, esse.</p>
View CodePen
</div>
</div>
</div>
</div>

Answer 1

The link is placed on the end with d-flex and flex-column on card-body and mt-auto on the link. On your CodePen you are missing some of these classes (example with classes)!
Note: You can find this example also on the official documentation of Bootstrap 4.
To center the links you can use the text-center class on the card-link.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row portfolio">
<div class="col-sm-12">
<h2>Portfolio</h2>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/700x400" alt="">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Project One</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur eum quasi sapiente nesciunt? Voluptatibus sit, repellat sequi itaque deserunt, dolores in, nesciunt, illum tempora ex quae? Nihil, dolorem!</p>
View CodePen
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/700x400" alt="">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Project Two</h4>
<p class="card-text ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
View CodePen
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/700x400" alt="">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Project Three</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos quisquam, error quod sed cumque, odio distinctio velit nostrum temporibus necessitatibus et facere atque iure perspiciatis mollitia recusandae vero vel quam!</p>
View CodePen
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/700x400" alt="">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Project Four</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
View CodePen
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/700x400" alt="">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Project Five</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
View CodePen
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6 portfolio-item">
<div class="card h-100">
<img class="card-img-top" src="http://placehold.it/700x400" alt="">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Project Six</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque earum nostrum suscipit ducimus nihil provident, perferendis rem illo, voluptate atque, sit eius in voluptates, nemo repellat fugiat excepturi! Nemo, esse.</p>
View CodePen
</div>
</div>
</div>
</div>

Answer 2

Add this css, it will work
.card-body {
display: flex;
flex-direction: column;
}
.card-link {
margin-top: auto;
}
codepen link

Answer 3

An alternative solution
You can align the link at the bottom of the card-body by following these three steps:
Apply the d-flex and flex-column classes to card-body
Wrap all the content of card-body in a div.
Use flex: 1 1 auto on this new div
Doing so, the newly created div always takes all the available space. Hence, the link is always at the bottom of the card-body.
.flex-grow {
flex: 1 1 auto;
}
<div class="card-body d-flex flex-column">
<div class="flex-grow">
<h4 class="card-title">Project One</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur eum quasi sapiente nesciunt? Voluptatibus sit, repellat sequi itaque deserunt, dolores in, nesciunt, illum tempora ex quae? Nihil, dolorem!</p>
</div>
View CodePen
</div>
Check this pen on CodePen
FYI, You can make an element occupy all the available space using this method.