Bootstrap image card text overlay

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/

score 1 · Answer 1 · answered Aug 25 '20 at 11:37

.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>

Rizeen · Answer 2 · 2022-09-06T12:32:50.993

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>

score 0 · Answer 3 · answered Aug 25 '20 at 11:41

<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

score 0 · Answer 4 · answered Sep 06 '22 at 11:54

.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>

Bootstrap image card text overlay

4 Answers4

Linked