Bootstrap 4 card/panel with image left of header and title

Question

I thought what I'm trying to do would be pretty easy to do but I just can't make it work.

I tried to do pull-left on bootstrap cards and panels and it's not working the way I want it to...

Here is a picture of what I'd like to acheive

Example

Heres code that almost works

<div class="card text-center" *ngFor="let event of eventActivities">     <div class="card-header pull-left">         <img src="..." alt="">          Title </div>     <div class="card-block">         <h4 class="card-title">Title</h4>         <p class="card-text">Description</p>         <a href="#" class="btn btn-primary">BUTTON</a>     </div>     <div class="card-footer text-muted">         FOOTER     </div> </div> 

Answer 1

There are a few different ways you could do this. Here's one way using the flex-row and flex-wrap utility classes to change the layout of elements inside the card...

https://www.codeply.com/go/l1KAQtjjbA

   <div class="card flex-row flex-wrap">         <div class="card-header border-0">             <img src="//placehold.it/200" alt="">         </div>         <div class="card-block px-2">             <h4 class="card-title">Title</h4>             <p class="card-text">Description</p>             <a href="#" class="btn btn-primary">BUTTON</a>         </div>         <div class="w-100"></div>         <div class="card-footer w-100 text-muted">             FOOTER         </div>     </div> 

Here's another approach using the grid...

  <div class="card">         <div class="row no-gutters">             <div class="col-auto">                 <img src="//placehold.it/200" class="img-fluid" alt="">             </div>             <div class="col">                 <div class="card-block px-2">                     <h4 class="card-title">Title</h4>                     <p class="card-text">Description</p>                     <a href="#" class="btn btn-primary">BUTTON</a>                 </div>             </div>         </div>         <div class="card-footer w-100 text-muted">             Footer stating cats are CUTE little animals         </div>   </div> 

https://www.codeply.com/go/l1KAQtjjbA

I'm not sure why you have text-center as nothing it centered in the desired example image.