Bootstrap 4 Left Align Card Image

Bootstrap 4 moves to the concept of cards (instead of the old panels and wells of Bootstrap 3). Cards come with some cool variations, one of which is a top or bottom image cap, like this:

I wanted a variation that doesn’t exist, a left “cap” image for the card. Here’s how I did it:

.card-img-left {
  border-bottom-left-radius: calc(.25rem - 1px);
  border-top-left-radius: calc(.25rem - 1px);
  float: left;
  padding-right: 1em;
  margin-bottom: -1.25em;
}

example.css — GitHub Gist

And here’s the end result: