So - yes, it's some sort of vertical align thing again (sorry!). I read the documentation and other questions regarding this topic, did my first projects and tried out different approaches, but somehow I can't figure out how to do this the "right way" with bootrap.
I want the elements inside of the columns to align on the same horizontal line (starting from the top) with the respective element from the other column. So, the h3 elements are all on the same horizontal line , the buttons are all on the same line etc.
I made 3 columns
<div class="container">
<div class="row justify-content-around>
<div class="col-md-4 d-flex flex-column align-items-center">
<h3> A Title </h3>
<hr>
<p> looooong text </p> <br>
<img src="an icon" width="55" height="55">
<button> A button </button>
</div>
<div class="col-md-4 d-flex flex-column align-items-center">
<h3> A Title </h3>
<hr>
<p> looooong text </p> <br>
<img src="an icon" width="55" height="55">
<button> A button </button>
</div>
<div class="col-md-4 d-flex flex-column align-items-center">
<h3> A Title </h3>
<hr>
<p> Short text </p> <br>
<img src="an icon" width="55" height="55">
<button> A button </button>
</div>
</div>
</div>
I could use "justify-content-between" on each column. But then, if one of the "p" content is longer than the one of another column, it won't work as intended - the shorter text would not start on the same horizontal line as the other texts, as my example below will demonstrate. Fixing it with manual margins would mess it up, should the text be changed later on by a client.
Justify-Content-Between: This is what I don't want
What would be a good way to achieve this kind of alignment?
You can divide your content and your icon/button into separate rows within each column, and then align the div with the icon/button to the bottom of the column.
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row justify-content-around">
<div class="col-md-4 d-flex flex-column mb-5">
<div class="row">
<div class="col">
<h3> A Title </h3>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
</div>
<div class="row align-self-center h-100">
<div class="col d-flex">
<div class="align-self-end">
<img src="an icon" class="d-block my-1 mx-auto" width="55" height="55">
<button> A button </button>
</div>
</div>
</div>
</div>
<div class="col-md-4 d-flex flex-column mb-5">
<div class="row">
<div class="col">
<h3> A Title </h3>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="row align-self-center h-100">
<div class="col d-flex">
<div class="align-self-end">
<img src="an icon" class="d-block my-1 mx-auto" width="55" height="55">
<button> A button </button>
</div>
</div>
</div>
</div>
<div class="col-md-4 d-flex flex-column mb-5">
<div class="row">
<div class="col">
<h3> A Title </h3>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="row align-self-center h-100">
<div class="col d-flex">
<div class="align-self-end">
<img src="an icon" class="d-block my-1 mx-auto" width="55" height="55">
<button> A button </button>
</div>
</div>
</div>
</div>
</div>
</div>I used align-self-end to position the row with the icon and button at the bottom, but IE11 doesn’t support flex start and end, so the layout doesn’t look as nice on IE11.
One other note – your sample code is missing the closing quote for the classes in the line: <div class="row justify-content-around>