Essentially, I’m trying to create an image gallery via bootstrap with 3 columns on large screens and 2 columns on mobile. I want to keep the aspect ratio of each image but have a fix width so they align within the columns. I’m a bit of a newbie but I managed to achieve the look on large screens. The issue comes when it’s on mobile. While it does follow the intended format, the last column essentially just stacks below the first column. I think I may need to redo my entire approach since I want the images to basically fill up any available space. I have tried other similar posts here but the issue is that their images have similar aspect ratios. The solution may not be bootstrap but I’m not sure exactly where to proceed.
This was my attempt:
<div class="container">
<div class="row">
<div class="break"></div>
<h4 class="headline text-center">illustrations.</h4>
<div class="break"></div>
<div class="col-md-4 fcontainer">
<div class="row iframe">
<img class="item" src="Assets/Illustrations/Test3.jpg" alt="Test6">
</div>
<div class="row iframe">
<img class="item" src="Assets/Illustrations/Test4.jpg" alt="Test5">
</div>
<div class="row iframe">
<img class="item" src="Assets/Illustrations/Test6.jpg" alt="Test4">
</div>
<div class="row iframe">
<img class="item" src="Assets/Illustrations/Test1.jpg" alt="Test3">
</div>
<div class="row iframe">
<img class="item" src="Assets/Illustrations/Test5.jpg" alt="Test2">
</div>
<div class="row iframe">
<img class="item" src="Assets/Illustrations/Test2.jpg" alt="Test1">
</div>
</div>
<--! multiply above div 2 more times for 3 columns -->
</div>
</div>
<div class="break"></div>
3
Answers
I got around to exploring and this is how I achieved what I wanted. Just multiply the gallery-item div multiple times per images in the gallery.
This is pure
css
notbootstrap
. hope this helps.If you have any questions comment down below.For custom personalization on screen size use
media queries
Use
col-4
for mobile display, and usecol-md-6
for the other large screens display.https://getbootstrap.com/docs/5.3/layout/grid/#grid-options