I've been struggling for hours trying to solve this problem and I could really use some advice:
My goal is to create a fully responsive grid of equal-sized images (400px x 400px each) with centered text using Bootstrap 3. The grid should span 100% of the screen width, displaying 6 images per row on larger screens with perfect alignment and no gaps or padding. On smaller screens, the image size should scale down responsively and each row should only contain 2 images.
+--------------------------------------------------------+
| Fixed Navbar |
|--------------------------------------------------------|
| |
| Header |
| |
+--------+---------+--------+---------+--------+---------+
| | | | | | |
| | | | | | |
| | | | | | |
| | | | | | |
+-------------------------------------------------------->
| | | | | | |
| | | | | | |
| | | | | | |
| | | | | | |
+--------v---------v--------v---------v--------v---------+
| |
| |
| Content |
| |
| |
+--------------------------------------------------------+
The issue I'm facing is that the images are breaking out of the natural 100% row width, creating unnecessary gaps as shown in the picture. This requires scrolling to see the entire page, which is not the intended behavior.
HTML:
<div class="row">
<div class="col-xs-6 col-sm-2 nopadding">
<div><img src="../img/image1.jpg" class="img-responsive" alt="Responsive image"></div>
</div>
<div class="col-xs-6 col-sm-2 nopadding">
<div><img src="../img/image2.jpg" class="img-responsive" alt="Responsive image"></div>
</div>
...
</div>
CSS:
.nopadding {
padding-left:0;
padding-right:0;
}