bootstrap 5 columns in one row

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!