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

Question

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

What is `col-s-4`, isn't that supposed to be `col-sm-4`? (And then the `sm` would of course mean, do _not_ apply this below the 576px breakpoint.) Which Bootstrap version are you using there? — CBroe, Jun 23 '23 at 11:12
Then I don't see how this could get you three columns next to each other at _any_ breakpoint, with that wrong class name. The correct _class infix_ for the Small breakpoint is `sm`. And if you want three columns even below the Small breakpoint - then you need to use no infix at all. https://getbootstrap.com/docs/5.3/layout/breakpoints/#available-breakpoints — CBroe, Jun 23 '23 at 11:22
Thank you very much the no infix solved the problem!!!!! Thank you!!!! — moontrivia, Jun 23 '23 at 11:30

cansev · Accepted Answer · 2023-06-23T11:24:20.423

0

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.

edited Jun 23 '23 at 11:24

answered Jun 23 '23 at 11:22

cansev

16
2

Welcome to Stack Overflow! This appears likely to have been written (entirely or partially) by AI (e.g., ChatGPT). As a heads-up, [posting of AI-generated content is not permitted on Stack Overflow](//meta.stackoverflow.com/q/421831). If you used an AI tool for assistance on this answer, could I ask you to (1) Reply in a comment here confirming that it was AI-generated, along with what tool (e.g., ChatGPT, Bing Chat, Copilot, etc.) -- We're compiling data on AI-assisted answers and could use your help. (2) After commenting, I recommend deleting your answer. Thanks! – NotTheDr01ds Jun 23 '23 at 11:47
**Readers should review this answer carefully and critically, as AI-generated information often contains fundamental errors and misinformation.** If you observe quality issues and/or have reason to believe that this answer was generated by AI, please leave feedback accordingly. The moderation team can use your help to identify quality issues. – NotTheDr01ds Jun 23 '23 at 11:47

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

1 Answers1