Bootstrap: Add support for horizontal card

[m5seppal]

I think it's very common use case that you want to have card content vertically in small screen and in bigger screens content is aligned horizontally. For example: http://www.apple.com/newsroom/

I implemented this for my own project roughly so that:

.card {    display: flex; flex-direction: column;}
.card-img {    order: -1;}
.card-block {    order: 0;}
.card-img-last {    order: 1;}

.card-img-last is basically same than .card-img-bottom, but it doesn't care about order in source and also naming works better with horizontal cards where last refers to the right side.

Then I have horizontal classes for cards which needs to be added in addition to basic card class:

.card-horizontal {    flex-direction: row;}
.card-horizontal-sm-up { ... }
.card-horizontal-md-up { ... } etc.

.card-horizontal .card-img {    flex: 0 0 $card-img-width;}
.card-horizontal .card-block {    flex: 0 0 calc(100% - $card-img-width)}

Something like that, not a perfect example but gives the basic idea how it is working. I'm using card-block now as a flex item but it won't work if I want to have card header or footer. There should be some wrapper div which contains all content expect image.

Only problem with this is to make image behave well in horizontal view. In my implementation .card-img is just a div container, then img is inside that and I use object-fit (IE/Edge fix with Javascript) to cover the whole div. I've set minimum and maximum height for .card-block to have always reasonably sized image there.

I would like to hear if this is wanted feature and then opinions what would be the correct implementation. Obviously we need to have also non-flex-box solution for that.

[mdo]

Making a note for future me: this will be easily accomplished with flexbox and flex-direction: row.

[maddinq]

any news about that topic?

[mariusl-a]

Bump! This would be awesome! 💯

[DarkDracoon]

This feature would make Bootstrap a bit more dynamic in terms of cards. I really want this to be implemented.

[morgyface]

Any progress?

[Neil-Jubinville]

This would be a good PR, nobody wants to break out a table tag - haha :)

[justinlevi]

I'm using a version of the following:

<div class="container py-3">
    <div class="card">
      <div class="row ">
        <div class="col-md-4">
            <img src="https://placeholdit.imgix.net/~text?txtsize=38&amp;txt=400%C3%97400&amp;w=400&amp;h=400" class="w-100">
          </div>
          <div class="col-md-8 px-3">
            <div class="card-block px-3">
              <h4 class="card-title">Lorem ipsum dolor sit amet</h4>
              <p class="card-text">Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
              <p class="card-text">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
              <a href="#" class="btn btn-primary">Read More</a>
            </div>
          </div>

        </div>
      </div>
    </div>

source: https://bootsnipp.com/snippets/XR0Dv

Would be great if this was supported natively though

[caderitter]

Would love to see this implemented! Another use case might be user profile images that accompany comments.

[jose-torres-marin]

Just found this exact requirement in a project... for now I just use a row and cols within the card. Still .card-img-left and .card-img-right would be great additions since it's such a common use case.

[tarkhov]

I already released this feature in my library - https://tarkhov.github.io/postboot/#card-image-position

[bellwood]

If you are using @justinlevi's solution, you'll need to adjust the second grid column to:

<div class="col-md-8 d-flex flex-column justify-content-between">

Otherwise a card-footer will not be at the bottom of the card, it will hug the bottom of card-body

Edit: spelling

[osc2nuke]

I came also across this issue.
Given solutions are great.
But i cannot find a solution to use any of the solutions when i want to use card-footer

[tarkhov]

@osc2nuke What you means?

[osc2nuke]

Not my code, but found an example what i required:
https://www.codeply.com/go/l1KAQtjjbA

[tarkhov]

@osc2nuke You can use this solution https://tarkhov.github.io/postboot/#card-image-position with this classes: .card-img-top-left, .card-img-top-right, .card-img-bottom-left. .card-img-bottom-right.
Example:

<div class="card">
  <div class="row">
    <div class="col-sm col-sm-auto pr-0">
      <img class="card-img-top-left" src="assets/img/example.jpg" height="200px"/>
    </div>
    <div class="col-sm px-0">
      <div class="card-body">
        <h4 class="card-title">Directions</h4>
        <p class="card-text">Example text</p>
      </div>
    </div>
  </div>
  <div class="card-footer">Footer</div>
</div>

[Nadeeshyama]

Could do the same with less nesting and existing classes. Just add d-flex flex-row class names to the card.

<div class="card d-flex flex-row">
  <img src="..." alt="...">
  <div class="card-body">
    <h3 class="card-title">Card title</h3>
    <p class="card-text">Card body text</p>
    <a href="#" class="btn btn-primary">Button text</a>
  </div>
</div>

[tarkhov]

@Nadeeshyama images also requires border-radius

[Nadeeshyama]

@tarkhov that is possible with border helper classes - https://getbootstrap.com/docs/4.1/utilities/borders/#border-radius

<div class="card d-flex flex-row">
  <img class="rounded" src="..." alt="...">
  <div class="card-body">
    <h3 class="card-title">Card title</h3>
    <p class="card-text">Card body text</p>
    <a href="#" class="btn btn-primary">Button text</a>
  </div>
</div>

[tarkhov]

@Nadeeshyama no it's not, image requires border-radius with sass variable $card-inner-border-radius according to card border-radius.

[sts-ryan-holton]

Any update on this?

[mdo]

@sts-ryan-holton We had a PR open but it was closed in October because this can be done via utilities: https://github.com/twbs/bootstrap/pull/23041#issuecomment-432755979.

If that example works for folks, I'm thinking maybe we slate this for v4.2.1 and do a docs updates to show it's possible?

[user414]

Haven't kept up with the thread, but we are using a variation of https://github.com/twbs/bootstrap/issues/20794#issuecomment-363558886. What we like the best about that approach, which after some quick test seems to differ from https://github.com/twbs/bootstrap/pull/23041#issuecomment-432755979, is that on smaller screen the horizontal card stack into a vertical card instead of being squished into something close to unreadable, which is exactly the behaviour we were looking for. Perhaps for completeness these 2 different approach can be shown in the documentation.

[tarkhov]

@m5seppal Worked solution for horizontal cards https://tarkhov.github.io/postboot/#card-image