Five responsive columns in a row with Bootstrap [duplicate] - html

Question

This question already has answers here:
Five equal columns in twitter bootstrap
(47 answers)
Bootstrap - 5 column layout
(20 answers)
Closed 2 years ago.
I want to create a row which has 5 responsive columns which have equal padding from top to bottom and from the sides, but can't find the best solution how to achieve it with bootstrap.
Current html:
<div class="row five-col-row">
<div class="col col-md-2 mx-2">
<h6>Sources</h6>
<span>{{ allStats.sources }}</span>
</div>
<div class="col col-md-2 mx-2">
<h6>Installs</h6>
<span>{{ allStats.installs }}</span>
</div>
<div class="col col-md-2 mx-2">
<h6>Conversions</h6>
<span>{{ allStats.conversions }}</span>
</div>
<div class="col col-md-2 mx-2">
<h6>Amount</h6>
<span>{{ allStats.conversion_amount }}$</span>
</div>
<div class="col col-md-2 mx-2">
<h6>Churn rate</h6>
<span>{{ allStats.churn_rate }}%</span>
</div>
</div>
Is there a way to create a responsive five column grid with Bootstrap?
The result I want to achieve is:
Any help will be appreciated.

Answer 1

Do not use margin-x on .col-* elements.
Set your custom padding-x on .col-*
Set padding-y on row. It should be two times padding-x of .col-*. For instance, if you set a 10px padding-x on columns, the padding-y of row should be 20px becuase there is 20px space between the columns.
Wrap the content of the .col-* elements in a div and apply all the style to this element instead of the column.
div.col div {
border: 1px solid #000;
height: 200px;
}
.py-1rem {
padding-top: 1rem;
padding-bottom: 1rem;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row py-1rem">
<div class="col col-md-2 px-2">
<div></div>
</div>
<div class="col col-md-2 px-2">
<div></div>
</div>
<div class="col col-md-2 px-2">
<div></div>
</div>
<div class="col col-md-2 px-2">
<div></div>
</div>
<div class="col col-md-2 px-2">
<div></div>
</div>
</div>
</div>