Bootstrap image card text overlay - image

Question

Unable to set card footer as expected output
Expected output:
My Code:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-3">
<div class="card">
<img src="https://images.unsplash.com/photo-1523805009345-7448845a9e53?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=752&q=80" class="card-img-top" alt="...">
<div class="card-img-overlay">
<h5 class="card-title"></h5>
</div>
<div class="card-footer text-center">
<h6>
Africa
</h6>
<h4>
Kenya
</h4>
</div>
</div>
</div>
jsfiddle: https://jsfiddle.net/sidh_41/p8sdfy7u/2/

Answer 1

.card-footer:last-child {
border-radius: 0!important;
}
.card-footer {
padding: 0!important;
background-color: unset!important;
border-top: unset!important;
}
.text-center {
color: #fff;
}
.card-img-overlay {
display: flex;
flex-direction: column;
justify-content: flex-end;
height: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-3">
<div class="card">
<img src="https://images.unsplash.com/photo-1523805009345-7448845a9e53?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=752&q=80" class="card-img-top" alt="...">
<div class="card-img-overlay">
<h5 class="card-title"></h5>
<div class="card-footer text-center">
<h6>
Africa
</h6>
<h4>
Kenya
</h4>
</div>
</div>
</div>
</div>

Answer 2

Try this:
.card-footer:last-child {
border-radius: 0!important;
}
.card-footer {
padding: 0!important;
background-color: unset!important;
border-top: unset!important;
}
.text-center {
color: #fff;
}
.card-img-overlay {
display: flex;
flex-direction: column;
justify-content: flex-end;
height: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-3">
<div class="card">
<img src="https://images.unsplash.com/photo-1523805009345-7448845a9e53?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=752&q=80" class="card-img-top" alt="...">
<div class="card-img-overlay">
<h5 class="card-title"></h5>
<div class="card-footer text-center">
<h6 class="m-0 small">
AFRICA
</h6>
<h1>
Kenya
</h1>
</div>
</div>
</div>
</div>

Answer 3

<div class="row">
<div class="col-md-3">
<div class="card">
<img class="card-img" src="https://images.unsplash.com/photo-1523805009345-7448845a9e53?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=752&q=80" alt="...">
<div class="card-img-overlay">
<h5 class="card-title"></h5>
<div class="card-footer text-center">
<h6>
Africa
</h6>
<h4>
Kenya
</h4>
</div>
</div>
</div>
</div></div>
I think you need to add another div surrounding the card. This div needs to have the class row

Answer 4

.img-wrapper{
position: relative;
text-align: center;
color: white;
}
.card-footer{
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
}
h3, h1{
color: #fff
}
<div class="col-md-3">
<div class="card">
<div class="img-wrapper">
<img src="https://images.unsplash.com/photo-1523805009345-7448845a9e53?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=752&q=80" class="card-img-top" alt="...">
<div class="card-img-overlay">
<h5 class="card-title"></h5>
</div>
</div>
</div>
<div class="card-footer text-center">
<h3>
Africa
</h3>
<h1>
Kenya
</h1>
</div>
</div>
</div>