Bootstrap 4: Why isn't this aligned to the bottom? - css

Question

I have a card and in it is an image then a header. Then, I want to have a paragraph and link all of the way at the bottom of the card. I defined a min-height in CSS to make room to do so. However, the following code just flows top to bottom with space at the bottom instead of content there.
<div class="col-lg-4">
<div class="card shadow">
<img class="card-img-top" src="https://source.unsplash.com/random/1600x900?house" alt="Card image cap">
<div class="card-body">
<h5 class="card-title text-center">47 Dream Homes You'll Wish You Could Afford</h5>
<div class="text-center d-block align-items-end">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos odio possimus labore ratione!.</p>
Go somewhere
</div>
</div>
</div>
</div>
Here is what it looks like and I want the lorem ipsum and button to be right up against the bottom with the headline at the top.

Answer 1

Let me suggest an alternative solution; one that would not require additional CSS and instead rely on Bootstrap's existing framework. The .card-footer class is part of the Card component and can integrate very well with your desired results.
To achieve equal heights you could rely either on .card-deck or simply applying the .h100 class to the .card wrapper. Since it's unclear how you might be applying this design to multiple cards the below example relies on .h100:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 col-lg-4">
<div class="card h-100 shadow">
<img class="card-img-top" src="https://source.unsplash.com/random/1600x900?house" alt="Card image cap">
<div class="card-body">
<h5 class="card-title text-center">47 Dream Homes You'll Wish You Could Afford</h5>
</div>
<div class="card-footer bg-white border-top-0 text-center">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos odio possimus labore ratione!.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="card h-100 shadow">
<img class="card-img-top" src="https://source.unsplash.com/random/1600x900?house" alt="Card image cap">
<div class="card-body">
<h5 class="card-title text-center">47 Dream Homes You'll Wish You Could Afford</h5>
</div>
<div class="card-footer bg-white border-top-0 text-center">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos odio possimus labore ratione! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos odio possimus labore ratione! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos odio possimus labore ratione!</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="card h-100 shadow">
<img class="card-img-top" src="https://source.unsplash.com/random/1600x900?house" alt="Card image cap">
<div class="card-body">
<h5 class="card-title text-center">47 Dream Homes You'll Wish You Could Afford</h5>
</div>
<div class="card-footer bg-white border-top-0 text-center">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos odio possimus labore ratione! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos odio possimus labore ratione!</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
Now by default .card-footer applies a top border as well as a slightly darker background. We can override those styles by applying .bg-white to modify the background color and .border-top-0 to remove the top border. There is no reason to declare it a block element and centering the text is as simple as applying .text-center.
No min-height CSS involved.
For more information on how the Card component can be grouped please review Bootstrap's 4.x documentation on Card layou

Answer 2

You have to make the card-body a flex-column and then align use a Bootstrap utility class to push the elements to the bottom.
Bootstrap Flex Utilities
So we apply .d-flex and .flex-column to the .card-body div and .mt-auto to the div holding your paragraph and button.
.card {
height: 600px;
/* artificial height */
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="card shadow">
<img class="card-img-top" src="https://source.unsplash.com/random/1600x900?house" alt="Card image cap">
<div class="card-body d-flex flex-column">
<h5 class="card-title text-center">47 Dream Homes You'll Wish You Could Afford</h5>
<div class="text-center d-block mt-auto">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos odio possimus labore ratione!.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
</div>

Answer 3

Use
use card groups so that footer section will align to the bottom.