Responsive group of images not staying in the same line on phone view - html

Question

so i kinda have two problems
i´m trying to make a responsive container of images that when the resolution changes the images stay side by side.
my problem is when i change the resolution to a phone when testing the images show one below the other and one
and one image's width is smaller so the image shows up a bit weird
here's what i tried
html
<div class="container-fluid">
<div class="row">
<div class="col-sm">
<img src="brands/Adidas-Logo.png" alt="" id="brand_img_adidas">
</div>
<div class="col-sm">
<img src="brands/Nike_logo.png" alt="" id="brand_img_nike">
</div>
<div class="col-sm">
<img src="brands/the-north-face-logo-png-8.png" alt="" id="brand_img_north">
</div>
<div class="col-sm">
<img src="brands/tommy-hilfiger-logo-png-transparent.png" alt="" id="brand_img_tommy">
</div>
<div class="col-sm">
<img src="brands/zara-logo-0.png" alt="" id="brand_img_zara">
</div>
</div>
</div>
css
#brand_img_adidas
{
width: 150px;
height: 100px;
max-width: 100%;
margin-left: 10px;
}
#brand_img_nike
{
width: 200px;
height: 100px;
margin-left: 20px;
max-width: 100%;
}
#brand_img_north
{
width: 150px;
height: 150px;
margin-left: 20px;
max-width: 100%;
}
#brand_img_tommy
{
width: 150px;
height: 120px;
margin-left: 20px;
max-width: 100%;
margin-right: 0;
}
#brand_img_zara
{
width: 150px;
height: 150px;
margin-left: 10px;
margin-right: 0;
max-width: 100%;
}

Answer 1

This is not using bootstrap but this should help you get an idea about using flexbox.
So, to stack the images next to each other, we can use display: flex on the parent container.
By default, the flex-direction will be row which means that the child elements will be placed next to each other.
We can also provide flex-wrap: wrap property to make sure that if the elements overflow, it will be moved to next row.
You can read more about flexbox here
.row {
display: flex;
flex-wrap: wrap;
}
.row .col {
margin-right: 5px;
}
<div class="row">
<div class="col">
<img src="https://via.placeholder.com/150" alt="" id="brand_img_adidas">
</div>
<div class="col">
<img src="https://via.placeholder.com/150" alt="" id="brand_img_2">
</div>
<div class="col">
<img src="https://via.placeholder.com/150" alt="" id="brand_img_3">
</div>
<div class="col">
<img src="https://via.placeholder.com/150" alt="" id="brand_img_4">
</div>
<div class="col">
<img src="https://via.placeholder.com/150" alt="" id="brand_img_5">
</div>
</div>