Seeking some insights on a Bootstrap issue I'm experiencing.
I've observed that the "container-fluid" divs with responsive images are slightly smaller than those containing only text.
This inconsistency in sizing is affecting the overall look of the website. For instance:
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 col-md-4"> <p> Test Paragrapgh </p> </div>
<div class="col-sm-6 col-md-4"> <p> Test Paragrapgh </p> </div>
<div class="col-sm-6 col-md-4"> <p> Test Paragrapgh </p> </div>
</div>
</div>
Upon inspecting the container-fluid element in Chrome, its size measures 1600x50 px. However, when I replace the paragraphs with images:
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 col-md-4"> <img class="img-responsive" src="myimage.jpg" alt=""> </div>
<div class="col-sm-6 col-md-4"> <img class="img-responsive" src="myimage.jpg" alt=""> </div>
<div class="col-sm-6 col-md-4"> <img class="img-responsive" src="myimage.jpg" alt=""> </div>
</div>
</div>
The container-fluid element now reads 1583x333 px in Chrome, causing all container-fluid sections to shrink to this narrow width. Consequently, the navbar size differs from other pages on my site - not ideal!
The CSS for img-responsive is simple:
.img-responsive{
display: center-block;
max-width: 100%;
height: auto;}
I've attempted adjusting margins on the img and img-responsive classes in the CSS with no success. Appreciate any suggestions you may have!