1

I'm stumbling uppon this problem every now and then since I started doing more frontend work. I'm using bootstrap as my frontend framework and want to do a simple 2 column layout. Each column has a title and an image.

Now my problem is that, if a title of one column spreads over multiple lines, the starting height of the image is not aligned along both columns. Example: example

the markup is just the basic bootstrap layout:

<div class='row'>
<div class='col-6'>
<h4>title</h4>
<img src='...'>
</div
<div class='col-6'>
<h4>some other long title over two lines</h4>
<img src='...'>
</div
</div>

I know how I could set the title heights with js to be the same for all titles but that does not seem to be a very nice solution to the problem. Is there a simple css trick to achieve this?

Claudio Brasser
  • 511
  • 3
  • 20
  • both the images have the same size? if yes, then set a flexbox column on `.col-6` with flex-end alignment – Fabrizio Calderan Mar 03 '20 at 15:05
  • that's right that works! just have to make a wrapper within the col with display flex and align-items end. How would you go about it if there was more content below the image with uncertain height? @FabrizioCalderan – Claudio Brasser Mar 03 '20 at 15:11
  • please share your complete output (code, not images) with all the possible cases – Fabrizio Calderan Mar 03 '20 at 15:13
  • No, until `subgrid` comes along, you need JS - https://stackoverflow.com/questions/56711501/align-child-elements-of-different-blocks – Paulie_D Mar 03 '20 at 15:13

0 Answers0