Bootstrap 4 img-responsive in one row

Question

I'm trying to add a row to my bootstrap site with four images which are sized via the img-responsive attribute. I want to have the following apperance: "4 columns in desktop, 2 columns in tablet and 1 column in mobile" For this I'm using the class "col-md-3 col-sm-6 col-xs-12" which I found here on stackoverflow.

My code looks like this:

<div class="container download" id="downloads">
    <h2>Downloads</h2>
    <p class="lead">Some Text.....</p>
    <div class="row">
        <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="LinkT">
            <img style="width: 20%; height: 20%" alt="AltText" src="LinkToImage" class="img-responsive">
        </a>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="LinkToImage">
            <img style="width: 20%; height: 20%" alt="AltText" src="LinkToImage" class="img-responsive">
        </a>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="LinkToImage">
            <img style="width: 20%; height: 20%" alt="AltText" class="img-responsive">
        </a>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="LinkToImage">
            <img style="width: 20%; height: 20%" alt="AltText" src="LinkToImage" class="img-responsive">
        </a>
        </div>
    </div>
  </div>

I tried several col classes but none works. If I inspect the site with firebug, firebug shows, that each col div class uses the whole width of the page and the images are displayed in one row :(

Thank you for your help

Answer 1

Looking at your code, the row/column piece appears to be ok... however you're using inline styles to size the images, which will override the .responsive-img class and size your images poorly. If you're not seeing the columns work as you expect, make sure you're appropriately including the bootstrap css, and that you're using the correct version of bootstrap relative to the class name. .responsive-img is a Bootstrap 3 class. If you're using Bootstrap 4 you will need to use .img-fluid

I have a working example that looks like this:

<div class="container download" id="downloads">
    <h2>Downloads</h2>
    <p class="lead">Some Text.....</p>
    <div class="row">
        <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="LinkT">
            <img alt="AltText" src="https://placehold.it/300" class="img-responsive">
        </a>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="LinkToImage">
            <img  alt="AltText" src="https://placehold.it/300" class="img-responsive">
        </a>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="LinkToImage">
            <img src="https://placehold.it/300" alt="AltText" class="img-responsive">
        </a>
        </div>

        <div class="col-md-3 col-sm-6 col-xs-12">
        <a href="LinkToImage">
            <img alt="AltText" src="https://placehold.it/300" class="img-responsive">
        </a>
        </div>
    </div>
 </div>

See here: https://codepen.io/kball/pen/RLaXqR

For a bootstrap 4 example see: https://codepen.io/kball/pen/aLZozo

Answer 2

Thank you all guys! kball lead me to my error... I noticed I was on Bootstrap 2.3 -.-, so I updated to version 4, removed the inline style that I was adding to the image and changed img-responsive to img-fluid.

And now it works like a charm :) Again thank you for your help and I'm bonking my head at the wall atm because I didn't notice I was using a old Bootstrap version