title: Bootstrap 4 card/panel with image left of header and title
body: <p>I thought what I'm trying to do would be pretty easy to do but I just can't make it work.</p>
  
  <p>I tried to do pull-left on bootstrap cards and panels and it's not working the way I want it to...</p>
  
  <p>Here is a picture of what I'd like to acheive</p>
  
  <p><a href="https://i.stack.imgur.com/H8Hk2.png" rel="noreferrer">Example</a></p>
  
  <p>Heres code that almost works</p>
  
  <pre><code>&lt;div class="card text-center" *ngFor="let event of eventActivities"&gt;
      &lt;div class="card-header pull-left"&gt;
          &lt;img src="..." alt=""&gt;
  
          Title &lt;/div&gt;
      &lt;div class="card-block"&gt;
          &lt;h4 class="card-title"&gt;Title&lt;/h4&gt;
          &lt;p class="card-text"&gt;Description&lt;/p&gt;
          &lt;a href="#" class="btn btn-primary"&gt;BUTTON&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="card-footer text-muted"&gt;
          FOOTER
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>