three images not side-by-side but vertical when using col-s-4

June 23, 2023

so I am trying to put three images side by side using bootstrap row and col-s-4. It works when using desktop size but when it comes to mobile and tablet size the images are stacked vertical instead?

Here is my html code:

<div class="container-fluid">
        <div class="row" id="order">
            <div class="col-s-4">
                <img class="img-responsive" src="order/order1.jpg">
            </div>
            <div class="col-s-4">
                <img class="img-responsive" src="order/order2.jpg">
            </div>
            <div class="col-s-4">
                <img class="img-responsive" src="order/order3.jpg">
            </div>
        </div>
</div>

Here is my css code:

#order{
  align-items: center;
  text-align: center;
}

#order img{
  object-fit: contain;
}

#order label{
  font-family: 'Jellee', sans-serif;
  font-weight: 200;
  color: black;
  text-align: center;
  padding: 0%;
}

I tried minimizing the image, using max-width: 100%, and width: calc(100%/3); but nothing seems to work just minimizes the image but it is still stacked horizontal

mobile version, image are all vertically stacked

but I want it to be like the desktop version wherein all images are horizontal

desktop version, images are horizontal

>Solution :

By using Bootstrap, you can make the three images stay aligned side by side in mobile and desktop versions. You can use Bootstrap’s Grid System feature for this.

<div class="row">
      <div class="col-md-4 col-sm-4">
        <img src="foto1.jpg" alt="foto 1">
      </div>
      <div class="col-md-4 col-sm-4">
        <img src="foto2.jpg" alt="foto 2">
      </div>
      <div class="col-md-4 col-sm-4">
        <img src="foto3.jpg" alt="foto 3">
      </div>
    </div>

Here we created a row with the row class and divided each image into three equal sizes with the col-md-4 col-sm-4 classes. With the col-md-4 class, we divided each picture into 3 in the desktop version and aligned them side by side. With the col-sm-4 class, we divided it into 3 in the mobile version and aligned it side by side.

In this way, it will be ensured that all three images are aligned side by side in both desktop and mobile versions.