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:

screenshot_56

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

And here’s the end result:

screenshot_57

6 Responses to “Bootstrap 4 Left Align Card Image”

  1. Jeetendra

    Hi Doug,

    Thanks for the nice post. Actually this is a common requirement for most of the developer at-least by the time bootstrap ppl come up with something like card-img-left. I was trying to achieve same but some how I am stuck. Would you mind helping with sample code if you can? I would need the html and css only.

    Thanks & Regards
    Jeetendra

    Reply
  2. Vincent Pazeller

    I think you can simply change the flex-direction css property and bootstrap 4 has a .flex-row class for this:

    Card title
    This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

    Reply
  3. PG

    Doug, I would also like to see HTML markup for this CSS. It does not seem to work correctly by adding CSS def and swapping img class.

    Reply
    • nullvariable

      Hi PG,

      you can see the live html here: http://synergymill.com

      It looks like this:

      <div class="event card">
      <div class="card-img-left">
      <img class="card-img-left" src="http://synergymill.com/wp-content/uploads/2017/02/2017-02-10-21.42.06.jpg" alt="Card image cap">
      </div>
      <div class="card-block">
      <h6 class="card-title"><a href="http://synergymill.com/events/xv3/open-hack-night" rel="nofollow">Open Hack Night</a></h6>
      <p class="card-text muted text-center">May 31st - 7:00pm</p>
      </div>
      </div>

      Reply

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>