Bootstrap card whose image image is top/left, depending on column breakpoint?

Question

Most Bootstrap 4 cards with images have either a .card-img-top or an image that goes somewhere else, like left, using additional/custom code.

Is there such thing as code for a single card whose image may be either at top of body or at left of body, depending on width?

See below, my current two different card types...

Top one is more standard with .card-img-top applied.
However, in certain scenarios on my site, I will want a more horizontal approach, with image on the left, achieved not with .card-img-top but with two additional columns, side-by-side. You also see this in the image.

Right now, I have had to write separate code to do this - one card type for vertical, the other for horizontal.

So I am curious - can I have a card whose image is either on top or on left depending on the size of the column containing it?

I'm trying to think it through, though... At browser xs and sm, all columns would be 12 and vertical cards required. But at browser md and lg, column widths will be varied according to mark-up needs as seen in the image.

Is this something that can be achieved using single-card code, or is there logic that is more complex than just this?

FYI...

Here is the code for my vertical cards...

Interviews

<!-- column -->
<div class="d-flex align-items-stretch col-xs-12 col-sm-4 col-md-6 col-lg-3 p-2">
    <!-- Card -->
    <div class="card rounded-0 w-100 bg-white shadow-sm">
        <a href="http://www.thedrum.com/news/2016/11/29/something-going-have-change-quickly-fts-elli-papadaki-programmatic-transparency">
                        <img src="http://www.example.com/image/http://www.example.com/wp-content/uploads/article_drum.jpeg" class="card-img-top img-fluid rounded-0"><!-- had w-100 -->
                      </a>
        <div class="card-body pb-2">
            <h6 class="card-title"><a href="http://www.thedrum.com/news/2016/11/29/something-going-have-change-quickly-fts-elli-papadaki-programmatic-transparency" class="text-dark">‘Something is going to have to change quickly,’ FT’s Elli Papadaki on programmatic transparency</a></h6>
        </div>
        <div class="card-footer bg-white text-muted small pt-0 border-top-0 px-3">
                      <img src="http://www.example.com/wp-content/uploads/fav_drum.png" width="17" class="rounded-circle">
                      <span class="ml-1"><a href="/source/the-drum/" class="text-muted">The Drum</a></span>
        </div>
    </div>
    <!-- Card -->
</div>
<!-- column -->


<!-- column -->
<div class="d-flex align-items-stretch col-xs-12 col-sm-4 col-md-6 col-lg-3 p-2">
    <!-- Card -->
    <div class="card rounded-0 w-100 bg-white shadow-sm">
        <a href="https://gigaom.com/2012/02/28/419-interview-ft-ceo-denies-sale-and-braves-strike-ahead-of-social-launch/">
                        <img src="http://www.example.com/image/http://www.example.com/wp-content/uploads/john-ridding-o.png" class="card-img-top img-fluid rounded-0"><!-- had w-100 -->
                      </a>
        <div class="card-body pb-2">
            <h6 class="card-title"><a href="https://gigaom.com/2012/02/28/419-interview-ft-ceo-denies-sale-and-braves-strike-ahead-of-social-launch/" class="text-dark">Interview: FT CEO Denies Sale And Braves Strike Ahead Of Social Launch</a></h6>
        </div>
        <div class="card-footer bg-white text-muted small pt-0 border-top-0 px-3">
                      <img src="http://www.example.com/wp-content/uploads/favicon_pc.gif" width="17" class="rounded-circle">
                      <span class="ml-1"><a href="/source/paidcontent/" class="text-muted">paidContent</a></span>
        </div>
    </div>
    <!-- Card -->
</div>
<!-- column -->


<!-- column -->
<div class="d-flex align-items-stretch col-xs-12 col-sm-4 col-md-6 col-lg-3 p-2">
    <!-- Card -->
    <div class="card rounded-0 w-100 bg-white shadow-sm">
        <a href="https://gigaom.com/2011/08/08/419-interview-digitals-second-age-begins-now-ft-ceo-says/">
                        <img src="http://www.example.com/image/http://www.example.com/wp-content/uploads/john-ridding-o.png" class="card-img-top img-fluid rounded-0"><!-- had w-100 -->
                      </a>
        <div class="card-body pb-2">
            <h6 class="card-title"><a href="https://gigaom.com/2011/08/08/419-interview-digitals-second-age-begins-now-ft-ceo-says/" class="text-dark">Interview: Digital’s Second Age Begins Now, FT CEO Says</a></h6>
        </div>
        <div class="card-footer bg-white text-muted small pt-0 border-top-0 px-3">
                      <img src="https://www.google.com/s2/favicons?domain=https://gigaom.com/2011/08/08/419-interview-digitals-second-age-begins-now-ft-ceo-says/" width="17" class="rounded-circle">
                      <span class="ml-1"><a href="/source/moconews/" class="text-muted">moconews</a></span>
        </div>
    </div>
    <!-- Card -->
</div>
<!-- column -->


<!-- column -->
<div class="d-flex align-items-stretch col-xs-12 col-sm-4 col-md-6 col-lg-3 p-2">
    <!-- Card -->
    <div class="card rounded-0 w-100 bg-white shadow-sm">
        <a href="https://gigaom.com/2011/06/07/419-interview-financial-times-grimshaw-app-stores-are-not-a-panacea/">
                        <img src="http://www.example.com/image/http://www.example.com/wp-content/uploads/rob-grimshaw-official-o-640x443.jpg" class="card-img-top img-fluid rounded-0"><!-- had w-100 -->
                      </a>
        <div class="card-body pb-2">
            <h6 class="card-title"><a href="https://gigaom.com/2011/06/07/419-interview-financial-times-grimshaw-app-stores-are-not-a-panacea/" class="text-dark">Interview: Financial Times’ Grimshaw: ‘App Stores Are Not A Panacea’</a></h6>
        </div>
        <div class="card-footer bg-white text-muted small pt-0 border-top-0 px-3">
                      <img src="https://www.google.com/s2/favicons?domain=https://gigaom.com/2011/06/07/419-interview-financial-times-grimshaw-app-stores-are-not-a-panacea/" width="17" class="rounded-circle">
                      <span class="ml-1"><a href="/source/moconews/" class="text-muted">moconews</a></span>
        </div>
    </div>
    <!-- Card -->
</div>
<!-- column -->

2.

And here is the code I'm trying for the horizontal-style cards...

<p><strong>Interviews</strong></p>

<div class="row">





<!-- column -->
<div class="d-flex align-items-stretch col-xs-12 col-sm-4 col-md-6 col-lg-6 p-2">
    <!-- Card -->
    <div class="card rounded-0 bg-white shadow-sm">
        <div class="row">

            <div class="col-md-4">
                <a href="http://www.thedrum.com/news/2016/11/29/something-going-have-change-quickly-fts-elli-papadaki-programmatic-transparency">
                                        <img src="http://www.example.com/image/http://www.example.com/wp-content/uploads/article_drum.jpeg" class="img-fluid rounded-0" style="object-fit:cover"><!-- had w-100 -->
                                      </a>
            </div>

            <div class="col-md-8 pl-0 py-2">
                <div class="card-block">
                  <h6 class="card-title"><a href="http://www.thedrum.com/news/2016/11/29/something-going-have-change-quickly-fts-elli-papadaki-programmatic-transparency" class="text-dark">‘Something is going to have to change quickly,’ FT’s Elli Papadaki on programmatic transparency</a></h6>
                                              <img src="http://www.example.com/wp-content/uploads/fav_drum.png" width="17" class="rounded-circle">
                            <span class="small pl-0 ml-0"><a href="/source/the-drum/" class="text-muted">The Drum</a></span>


                                  </div>
            </div>

        </div><!-- end .row -->
    </div>
    <!-- Card -->
</div>
<!-- column -->





<!-- column -->
<div class="d-flex align-items-stretch col-xs-12 col-sm-4 col-md-6 col-lg-6 p-2">
    <!-- Card -->
    <div class="card rounded-0 bg-white shadow-sm">
        <div class="row">

            <div class="col-md-4">
                <a href="https://gigaom.com/2012/02/28/419-interview-ft-ceo-denies-sale-and-braves-strike-ahead-of-social-launch/">
                                        <img src="http://www.example.com/image/http://www.example.com/wp-content/uploads/john-ridding-o.png" class="img-fluid rounded-0" style="object-fit:cover"><!-- had w-100 -->
                                      </a>
            </div>

            <div class="col-md-8 pl-0 py-2">
                <div class="card-block">
                  <h6 class="card-title"><a href="https://gigaom.com/2012/02/28/419-interview-ft-ceo-denies-sale-and-braves-strike-ahead-of-social-launch/" class="text-dark">Interview: FT CEO Denies Sale And Braves Strike Ahead Of Social Launch</a></h6>
                                              <img src="http://www.example.com/wp-content/uploads/favicon_pc.gif" width="17" class="rounded-circle">
                            <span class="small pl-0 ml-0"><a href="/source/paidcontent/" class="text-muted">paidContent</a></span>




                                  </div>
            </div>

        </div><!-- end .row -->
    </div>
    <!-- Card -->
</div>
<!-- column -->





<!-- column -->
<div class="d-flex align-items-stretch col-xs-12 col-sm-4 col-md-6 col-lg-6 p-2">
    <!-- Card -->
    <div class="card rounded-0 bg-white shadow-sm">
        <div class="row">

            <div class="col-md-4">
                <a href="https://gigaom.com/2011/08/08/419-interview-digitals-second-age-begins-now-ft-ceo-says/">
                                        <img src="http://www.example.com/image/http://www.example.com/wp-content/uploads/john-ridding-o.png" class="img-fluid rounded-0" style="object-fit:cover"><!-- had w-100 -->
                                      </a>
            </div>

            <div class="col-md-8 pl-0 py-2">
                <div class="card-block">
                  <h6 class="card-title"><a href="https://gigaom.com/2011/08/08/419-interview-digitals-second-age-begins-now-ft-ceo-says/" class="text-dark">Interview: Digital’s Second Age Begins Now, FT CEO Says</a></h6>
                                              <img src="https://www.google.com/s2/favicons?domain=https://gigaom.com/2011/08/08/419-interview-digitals-second-age-begins-now-ft-ceo-says/" width="17" class="rounded-circle">
                            <span class="small pl-0 ml-0"><a href="/source/moconews/" class="text-muted">moconews</a></span>





                                  </div>
            </div>

        </div><!-- end .row -->
    </div>
    <!-- Card -->
</div>
<!-- column -->





<!-- column -->
<div class="d-flex align-items-stretch col-xs-12 col-sm-4 col-md-6 col-lg-6 p-2">
    <!-- Card -->
    <div class="card rounded-0 bg-white shadow-sm">
        <div class="row">

            <div class="col-md-4">
                <a href="https://gigaom.com/2011/06/07/419-interview-financial-times-grimshaw-app-stores-are-not-a-panacea/">
                                        <img src="http://www.example.com/image/http://www.example.com/wp-content/uploads/rob-grimshaw-official-o-640x443.jpg" class="img-fluid rounded-0" style="object-fit:cover"><!-- had w-100 -->
                                      </a>
            </div>

            <div class="col-md-8 pl-0 py-2">
                <div class="card-block">
                  <h6 class="card-title"><a href="https://gigaom.com/2011/06/07/419-interview-financial-times-grimshaw-app-stores-are-not-a-panacea/" class="text-dark">Interview: Financial Times’ Grimshaw: ‘App Stores Are Not A Panacea’</a></h6>
                                              <img src="https://www.google.com/s2/favicons?domain=https://gigaom.com/2011/06/07/419-interview-financial-times-grimshaw-app-stores-are-not-a-panacea/" width="17" class="rounded-circle">
                            <span class="small pl-0 ml-0"><a href="/source/moconews/" class="text-muted">moconews</a></span>





                                  </div>
            </div>

        </div><!-- end .row -->
    </div>
    <!-- Card -->
</div>
<!-- column -->
          </div>




</div>

(I am endeavouring to make the images "cover" style, where they fill the available space. Images on a vertical card should retain a landscape orientation, images on a horizontal card should be square. NB - there is currently an issue with my horizontal-card code which introduces a border/margin below the left image when the text on the right is longer than it.)

Mihai T Mihai T · Accepted Answer · 2018-11-12T14:13:48

If i understood your question correctly ( was a long read :) ) , you could make use of the flex-direction property.

I made a simple example for you. First, the columns are one after the other ( horizontally ) and the contents inside the same.

Then after a desired breaking point ( 600px ) i made the columns to have a column direction.

You could also play around with bootstrap classes and you might get the same result.

See snippet below or jsFiddle

.col-4 {
  flex-direction: row;
  display: flex;
}

@media only screen and (max-width: 600px) {
  .col-4 {
    flex-direction: column;
  }
}

<div class="row">
  <div class="col-4">
    <img src="https://via.placeholder.com/150">
    <div class="text">
      some text
    </div>
  </div>
  <div class="col-4">
    <img src="https://via.placeholder.com/150">
    <div class="text">
      some text
    </div>
  </div>
  <div class="col-4">
    <img src="https://via.placeholder.com/150">
    <div class="text">
      some text
    </div>
  </div>
</div>

Bootstrap card whose image image is top/left, depending on column breakpoint?

1 Answers