Bootstrap/flexbox card: move image to left/right side on desktop

Question

I'm trying to build following card layout using Bootstrap 4 with flexbox enabled. Picture is taken from my current implementation and it works like expected.

HTML structure is following:

<section>
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <div class="card">
          <div class="card-block">
            <h4 class="card-title">Curabitur gravida vestibulum imperdiet.</h4>
            <p class="card-text">Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem. Integer sed mi quis nisl eleifend interdum.</p>
            <p class="card-text">Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem.</p>
            <a href="#" class="btn btn-primary">Read More</a>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <img class="card-img-bottom" src="img1.jpg" alt="" title="">
      </div>
    </div>
  </div>
</section>

Now when I scale to larger screen, I got following output (which is expected with Bootstrap but not wanted one):

What I would like to see instead is:

So my question is, how I can properly implement this kind of layout? I'm using flex-box, so Bootstrap columns (col-*) are always same height which is exactly what I want. But I should remove the paddings between two columns, then make both columns content always to cover 100% of parent height, and finally make sure that picture maintains it's aspect ratio, so it should be cropped from the center like I have in example.

I've Googled and tried many different solutions but all of them seems to be overly complex or "hacky" solutions. So I'm wondering is it true that there is no easy way to implement this kind of layout...?

Note: solution doesn't have to be Bootstrap related, general solution for this kind of problem is even better.

Answer 1

Update: Bootstrap officially supports horizontal cards nowadays

I created a feature request for this back in time: https://github.com/twbs/bootstrap/issues/20794. Nowadays Bootstrap has horizontal cards supported and documented.

Bootstrap implementation is based on a combination of grid and utility classes:

<div class="card mb-3" style="max-width: 540px;">
  <div class="row no-gutters">
    <div class="col-md-4">
      <img src="..." class="card-img" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

The solution is effectively pretty much the same as I used. You still might need to do minor tweaks to make it work as you wish, also stated in the documentation: "Further adjustments may be needed depending on your card content".

Original answer

I figured out one way to do this, using background-size: cover. I had to use div instead of img but otherwise this solution works and in my case img is not so necessary. Other solutions are still welcome.

I modified my html a little:

<section>
  <div class="container">
    <div class="card">
      <div class="row">
        <div class="col-md-6">
          <div class="card-block">
            <h4 class="card-title">Curabitur gravida vestibulum imperdiet.</h4>
            <p class="card-text">Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem. Integer sed mi quis nisl eleifend interdum.</p>
            <p class="card-text">Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem.</p>
            <a href="#" class="btn btn-primary">Read More</a>
          </div>
        </div>
        <div class="col-md-6">
          <div class="card-img-bottom">
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

For card-img-bottom, I set style:

.card-img-bottom {
  color: #fff;
  height: 20rem;
  background: url(images/img1.jpg) center no-repeat;
  background-size: cover;
}

And in the desktop view, I change the height to 100% so the height is always the same than the height of card-block.

There is still some extra padding between card-block and card-img-bottom in the desktop view because of Bootstrap default paddings. For that reason, the white area is slightly bigger than the image. For me, it's not an issue so I didn't remove them.