bootstrap 5 columns in one row - html

Question

Five equal columns in twitter bootstrap
Bootstrap - 5 column layout
5 columns per row in Bootstrap-4
I have already looked at these links but still not found an issue
I have tried to get 5 columns in a row with below
css
.col-xs-offset-13{
margin-left:4.166666667%;
}
html
<div class="col-xs-2">1</div>
<div class="col-xs-2 col-xs-offset-13">2</div>
<div class="col-xs-2 col-xs-offset-13">3</div>
<div class="col-xs-2 col-xs-offset-13">4</div>
<div class="col-xs-2 col-xs-offset-13">5</div>
but the result I get is 6 columns in a row. any ideas would be appreciated

Answer 1

you can use a col-xx class without a column size :
div div div {
border: solid;
margin: 2px;/* this can be added without breaking the row */
}
div div div:before {
content:attr(class);/* show class used */
color:crimson
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<p>Class used , play snippet in full page to test behavior on resizing :</p>
<div class="container">
<div class="row">
<div class="col-sm"></div>
<div class="col-sm"></div>
<div class="col-sm"></div>
<div class="col-sm"></div>
<div class="col-sm"></div>
</div>
<div class="row">
<div class="col-md"></div>
<div class="col-md"></div>
<div class="col-md"></div>
<div class="col-md"></div>
<div class="col-md"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
</div>

Answer 2

Include in your CSS style:
.custom-col{
width: 20%;
word-break:break-all;
}
HTML:
<div class="row">
<div class="custom-col">CONTENT</div>
<div class="custom-col">CONTENT</div>
<div class="custom-col">CONTENT</div>
<div class="custom-col">CONTENT</div>
<div class="custom-col">CONTENT</div>
</div>
It worked for me!