Stop items matching the height of other items in flex (bootstrap 4)

HTML & CSS
1

Hi,

I have a row with 3 columns in. Each column is not the same height and I would like them to be staggered in height rather than all being equal height and matching the height of the tallest one.

Is this possible?

I’ve tried using float: left on the columns, but can’t seem to get it to work.

This is an example:

I would like them to be aligned to the bottom so it looks as though the middle one is higher than the other.

Can anyone suggest a way to do this?

Thanks!

2

Yes, since your using flex it comes with built in alignment features.
You can learn about them here.

Properties that control alignment

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>

.row {
  display:flex;
  align-items:end;
}
.row div {
  flex: auto;
}
</style>
</head>

<body>
<div class="container">
  <div class="row">
    <div class="col-md-4" style="background: #ccc;">
    Text here<br />
    Text here<br />
    Text here<br />
    Text here<br />
    Text here<br />

    </div>

    <div class="col-md-4" style="background: #ddd;">
    Text here<br />
    Text here<br />
    Text here<br />
    Text here<br />
    Text here<br />
    Text here<br />
    Text here<br />
    Text here<br />
    </div>


    <div class="col-md-4" style="background: #eee;">

    Text here<br />
    Text here<br />
    Text here<br />
    Text here<br />
    </div>
  </div>
</div>

</body>
</html>
3 Likes
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.