col-xs- was originally used in Bootstrap-3. However, for Bootstrap-4 and smaller screens, it is recommended to use col-4, so your code will appear as follows:
<div class='row'>
<div class='col-4 col-sm-2'>1</div>
<div class='col-4 col-sm-2'>2</div>
<div class='col-4 col-sm-2'>3</div>
<div class='col-4 col-sm-2'>4</div>
<div class='col-4 col-sm-2'>5</div>
<div class='col-4 col-sm-2'>6</div>
</div>
This setup will create three columns on a smartphone and six columns on other devices.
Enhanced spacing between elements:
If you desire additional space between the elements, consider placing another column within your initial column and then adding your content in that column. By default, the gutter has a width of 15px, resulting in a total spacing of 30px between columns. You can customize this spacing by referring to this answer:
To provide an illustration, I have adjusted the initial solution to include a 5px gutter (totaling 10px) and added spacing between elements on smartphones. Additionally, there is a block below the elements to demonstrate close alignment if desired. Remove the mb-n3 margin on the row if no bottom space is required.
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1f7d70706b6c6b6b76b65f5d247b47571054">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.row.gutter {
margin-left: -5px;
margin-right: -5px
}
[class*="col-"].gutter {
padding-left: 5px;
padding-right: 5px;
}
</style>
<div class="container mt-5">
<div class='row mb-n3 gutter'>
<div class='col-4 col-sm-2 mb-3 gutter text-center text-light '>
<div class="col bg-primary">1</div>
</div>
<div class='col-4 col-sm-2 mb-3 gutter text-center text-light '>
<div class="col bg-secondary">2</div>
</div>
<div class='col-4 col-sm-2 mb-3 gutter text-center text-light '>
<div class="col bg-success">3</div>
</div>
<div class='col-4 col-sm-2 mb-3 gutter text-center text-light '>
<div class="col bg-danger">4</div>
</div>
<div class='col-4 col-sm-2 mb-3 gutter text-center text-light '>
<div class="col bg-warning">5</div>
</div>
<div class='col-4 col-sm-2 mb-3 gutter text-center text-light '>
<div class="col bg-info">6</div>
</div>
</div>
</div>
<div class="container-fluid bg-dark text-light" style="height: 200px;">
<p>A filler div to show that there can be a space between the rows of elements on a small screen, but no space below the row, if you don’t want one.</p>
</div>