I've been exploring ways to create a container with 4 images aligned next to each other, accompanied by a button beneath each image. My goal is for the layout to be responsive, meaning that as the screen size adjusts, the elements inside should also adapt accordingly. Below is my current implementation:
<pre><code>
<div class="container-md">
<div class="row">
<div class="col-md-3">
<img src="img1.png">
<button class="btn mt-2 btn-secondary">Button 1</button>
</div>
<div class="col-md-3">
<img src="img2.png"">
<button class="btn mt-2 btn-secondary">Button 2</button>
</div>
<div class="col-md-3">
<img src="img3.png">
<button class="btn mt-2 btn-secondary">Button 3</button>
</div>
<div class="col-md-3">
<img src="img4.png">
<button class="btn mt-2 btn-secondary">Button 4</button>
</div>
</div>
</div>
</code></pre>
The expected behavior based on different screen sizes is illustrated below: Large screen size:
Medium screen size
Small screen size
However, in my current code, the images appear too large and the buttons are positioned inline with the images, lacking responsiveness (emoji images are used as examples):
I understand that resizing the images is necessary, but I have attempted various methods without finding the most suitable one. Any suggestions or tips on styling would be greatly appreciated.