Currently, I am using Bootstrap 4 to create a simple 4*4 grid of divs that contain an image and some text. Initially, I tried using 6 columns nested inside a single row, but the picture wasn't centered correctly within the column. Then, I applied text-center to the row, which centered the image but also centered the text when I wanted it to be aligned to the left of the image.
After scrapping the rows and columns approach, I attempted using Bootstrap's flex classes. The structure looked like this:
<div class="d-flex justify-content-around">
<div class="d-flex flex-column">
<div> image and text content here </div>
</div>
</div>
While this new method worked well, the varying column heights caused alignment issues in the overall layout:
https://i.sstatic.net/driuz.png
I'm now looking for a solution to fix this issue. What is the best practice for creating a grid of divs like this using Bootstrap 4?
For reference, here is the full code snippet:
<div class="row border justify-content-around border-r flex-wrap">
<div class="d-flex flex-column border-r"> <!-- this is repeated twice more for each column -->
<div class="tile">
<a href="./wanderlust.html">
<img class ="thumbnail img-fluid" src ="images/wanderlust.jpg"/>
<h5 class=" thumbnail-title"> Wanderlust </h5>
<p class=" thumbnail-subtitle"> design research + UX + UI <br> + programming </p>
</a>
</div>
<div class="tile">
<a href ="behavior-change.html">
<img class ="thumbnail img-fluid" src ="images/breakfast.jpg">
<h5 class="thumbnail-title"> Behavior Change </h5>
<p class="thumbnail-subtitle"> design research</p>
</a>
</div>
</div>
</div>