How can i make Containers in Bootstrap side by side? - html

Question

This is my container. I think it looks really good, but it only shows one container on the right side, and I want it to show 3 side by side. How can I do this?
If I just copy and paste the code right beneath itself, the second container is underneath the first one.
<div class="container">
<div class="row">
<div class="col-sm">
<h2>Product 2</h2>
</div>
<br>
<br>
<div class="text-center">
<img src="https://picsum.photos/200" alt="..." class="img-thumbnail" />
</div>
<div class="text-center">
<button class="btn btn-primary btn-sx" type="button">Confirm</button>
</div>
</div>
</div>

Answer 1

Use the Bootstrap Grid!
To arrange any elements into a grid, use the Bootstrap grid system. Give the parent element the row class, and give any children the col class. This will make all the children elements share the parent horizontally.
<div class="row">
<div class="col">
<div class="col-sm">
<h2>Product 2</h2>
</div>
</div>
<div class="col">
<div class="text-center">
<img src="https://picsum.photos/200" alt="..." class="img-thumbnail">
</div>
</div>
<div class="col">
<div class="text-center">
<button class="btn btn-primary btn-sx" type="button">Confirm</button>
</div>
</div>
</div>
You could replace col with col-4, which would do almost the same thing, but would be more explicit.
You could add a breakpoint (like sm) to the class (so col-sm), to make it automatically wrap vertically when you resize the window to a certain breakpoint.
Learn all about the Bootstrap grid system here.

Answer 2

W3schools: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_default&stacked=h
You try it:
<div class="row">
<div class="col-sm-4">
<h2>Product 2</h2>
</div>
<div class="col-sm-4">
<img src="https://picsum.photos/200" alt="..." class="img-thumbnail" />
</div>
<div class="col-sm-4">
<button class="btn btn-primary btn-sx" type="button">Confirm</button>
</div>
</div>
</div>
`
don't forget :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>