Equal spacing between columns in Bootstrap 4 - css

Question

I am beginner web developer (html and css).
My project is in Bootstrap 4.
I have 5 columns in one line.
I have this code:
<section class="related-product">
<div class="container">
<div class="row">
<div class="col-12 h-100 pt-4">
<h4 class="float-left">Podobne produkty</h4>
<span class="pl-3 related-product-count">(20 produktów)</span>
</div>
</div>
<div class="row">
<div class="col">
<div class="mt-5 w-100">
<div class="w-100 mb-3">
<img src="img/product1.png" class="img-fluid">
</div>
<div class="product-card-name-box">
<a class="product-card-new-info" href="#">Nowość</a><br/>
<div class="product-card-name pt-2">
Szafka mimimo
</div>
</div>
<div class="product-card-category">Stojąca</div>
</div>
</div>
<div class="col">
<div class="mt-5 w-100">
<div class="w-100 mb-3">
<img src="img/product2.png" class="img-fluid">
</div>
<div class="product-card-name-box">
<a class="product-card-new-info" href="#">Nowość</a><br/>
<div class="product-card-name pt-2">
Szafka mimimo
</div>
</div>
<div class="product-card-category">Stojąca</div>
</div>
</div>
<div class="col">
<div class="mt-5 w-100">
<div class="w-100 mb-3">
<img src="img/product3.png" class="img-fluid">
</div>
<div class="product-card-name-box">
<a class="product-card-new-info" href="#">Nowość</a><br/>
<div class="product-card-name pt-2">
Szafka mimimo
</div>
</div>
<div class="product-card-category">Stojąca</div>
</div>
</div>
<div class="col">
<div class="mt-5 w-100">
<div class="w-100 mb-3">
<img src="img/product4.png" class="img-fluid">
</div>
<div class="product-card-name-box">
<a class="product-card-new-info" href="#">Nowość</a><br/>
<div class="product-card-name pt-2">
Szafka mimimo
</div>
</div>
<div class="product-card-category">Stojąca</div>
</div>
</div>
<div class="col">
<div class="mt-5 w-100">
<div class="w-100 mb-3">
<img src="img/product5.png" class="img-fluid">
</div>
<div class="product-card-name-box">
<a class="product-card-new-info" href="#">Nowość</a><br/>
<div class="product-card-name pt-2">
Szafka mimimo
</div>
</div>
<div class="product-card-category">Stojąca</div>
</div>
</div>
</div>
</div>
</section>
How can you make equal spacing between the columns (on LG and XL)?
How can I do at smaller resolutions (xs sm, md) of 1 or 2 columns in a row (responsive)?
How can I make it?
Please help me

Answer 1

In this situation, I would suggest you try Table instead, you may try here
However, for smaller Col you may refer to link here go to Grid Classes, there you are able to chose the best option according to your targeting resolution.
If you leave it as default Col, it will divide the space equally, lets say:
<Row>
<Col></Col>
<Col></Col>
</Row>
In this case, both Col will share 50% of your space that you allocated.
For responsive, you may get the overall css here, under Grid Option and Responsive column resets Try to drag your browser to see the performance :)