I've been experimenting with laying out 4 elements in a row while customizing the horizontal gutter. Initially, I tried placing each element within a col using the class col-md-2 for a specific screen size and adjusting the margin-right of each element accordingly. However, the result wasn't optimal. When switching to col-md-3, there was no space left to add margins. Surprisingly, using the col-md-2.5 class worked on larger screens. But when I wanted the elements to span 10 columns on smaller screens, they did, only to revert back to the smaller screen behavior on larger screens. The HTML code below along with a screenshot illustrates what I am trying to achieve.
[class^="col"]:not(:last-child){
margin-right: 60px;
}<div class="container">
<div class="row">
<div class="col col-md-2.5">1</div>
<div class="col col-md-2.5">2</div>
<div class="col col-md-2.5">3</div>
<div class="col col-md-2.5">4</div>
</div>
</div>
<!--The above HTML and CSS achieved my goal on large screens.-->
<!--Things get messy when trying to adjust the view on smaller screens-->
<div class="container">
<div class="row">
<div class="col-10 offset-1 col-md-2.5">1</div>
<div class="col-10 offset-1 col-md-2.5">2</div>
<div class="col-10 offset-1 col-md-2.5">3</div>
<div class="col-10 offset-1 col-md-2.5">4</div>
</div>
</div>
<!--Works well on small screens, but lacks the desired behavior when returned to big screens with this setup.-->Here is the screenshot depicting the desired behavior:
https://i.sstatic.net/mxA1R.png
Your assistance is much appreciated!