-3

I want to achieve this effect within Bootstrap 4 columns/cards:

Is it possible with flexbox?

This is my source code I play with:

https://jsfiddle.net/dandaka/us04p2vg/

<div class="container">
  <div class="row">
    <div class="col">
      <div class="img-top"><img src="https://placehold.it/350x100" alt="" class="img-fluid"></div>
      <div class="text-bottom">Lorem ipsum</div>
    </div>
    <div class="col">
      <div class="img-top"><img src="https://placehold.it/350x50" alt="" class="img-fluid"></div>
      <div class="text-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</div>
    </div>
    <div class="col">
      <div class="img-top"><img src="https://placehold.it/350x250" alt="" class="img-fluid"></div>
      <div class="text-bottom">Lorem ipsum dolor sit amet</div>
    </div>
  </div>
</div>

I had thought about following solutions:

  • Use multiple rows for image and text. Will work bad when stacking in small breakpoints. And whole card should have hover state, which will work bad when broken in 2 rows.
  • Use Bootstrap cards. They seem to work only with fixed height images.
  • Use baseline alignment in flexbox. Can't find any example, where two elements grow in different directions from one axis.
  • Fix text block height in pixels. Not a solution at all, just a workaround.

Can't think about anything else.

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
dandaka
  • 829
  • 2
  • 9
  • 19
  • @ZimSystem I don't even know, where to start, to be honest. I can align to a start or a end. But it doesn't solve anything. I have added a JSFiddle with sample code. – dandaka Mar 02 '17 at 12:08
  • @ZimSystem B4 cards seems to work with fixed height images, not relevant in my case. When images have different size, layout breaks. All flexbox alignment examples doesn't show anything close to my task. – dandaka Mar 02 '17 at 12:19

1 Answers1

0

One approach is to set a % height on the top image and lower text. Then use flexbox to align the items accordingly..

<div class="row align-items-baseline">
    <div class="col">
        <div class="img-top d-flex h-50"><img src="https://placehold.it/350x100" alt="" class="align-self-end img-fluid"></div>
        <div class="text-bottom p-3 h-50">Lorem ipsum her eis some more text</div>
    </div>
    <div class="col">
        <div class="img-top d-flex h-50"><img src="https://placehold.it/350x50" alt="" class="align-self-end img-fluid"></div>
        <div class="text-bottom p-3 h-50">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</div>
    </div>
    <div class="col">
        <div class="img-top d-flex h-50"><img src="https://placehold.it/350x250" alt="" class="align-self-end img-fluid"></div>
        <div class="text-bottom p-3 h-50">Lorem ipsum dolor sit amet</div>
    </div>
</div>

http://www.codeply.com/go/vc8Mk2Rjm0

I used 50/50 because it's included in BS4, but you can customize the proportions of top/bottom..

.h-40 {
    height: 40%;
}
.h-60 {
    height: 60%;
}

http://www.codeply.com/go/whe449Ixtx

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • When I add another row like this, it all gets messed https://jsfiddle.net/dandaka/9oaaxgzs/1/ – dandaka Mar 02 '17 at 13:52
  • Yeah the question didn't really mention that, so you'll probably need to tweak this solution. Perhaps set a min-height on each row. – Carol Skelly Mar 02 '17 at 13:54
  • min-height kills the purpose of this. Why set min-height, when you can specify height at first place? The goal is to have objects with flexible height, while keeping whole row same height. And aligned to one axis. – dandaka Mar 02 '17 at 13:57
  • 1
    It was a suggestion. As I said, *you may need to tweak the solution*, but in general it should answer your question. For example, using `align-items-baseline` in each `row` seems to resolve your multi row issue that was not clarified in the original question. http://www.codeply.com/go/whe449Ixtx – Carol Skelly Mar 02 '17 at 14:46