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 t

Answer 1

HTML:

<div class="card">
    <div class="card-horizontal">
        <div class="img-square-wrapper">
            <img class="" src="http://via.placeholder.com/300x180" alt="Card image cap">
        </div>
        <div class="card-body">
            <h4 class="card-title">Card title</h4>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
    </div>
    <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
    </div>
</div>

CSS:

.card-horizontal {
  display: flex;
  flex: 1 1 auto;
}

Result:

Answer 2

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.