Creating a complex layout in Bootstrap has been challenging for me. Whenever I remove the image on the right side, all other images resize, which is not what I want.
How can I ensure that all the images maintain the same size regardless of how many are displayed?
I attempted to use fixed width and height values, but the outcome was unsatisfactory. Since the number of images may vary based on titles, I could have 3, 2, or even 5 images.
If you have any suggestions or solutions, please help me out!
Before removing: After removing:
.container-fluid .expo {
...
}
...<div class="container-fluid expo">
<div class="row expoinfo">
<section class="col-lg-10 col-lg-offset-1">
<h3>title</h3>
<div class="bigimg col-sm-6 col-md-6 col-lg-6">
<a href="http://fakeimg.pl/700x400/" title="">
<img src="http://fakeimg.pl/600x600/" alt="">
</a>
</div>
...
</section>
</div>
</div>