0

I am trying to place 5 columns in one row, I've tried using offset='1' but it isn't working. How to solve this?

b-row.mt-5
      b-col(lg='3' offset='1')
        b-button Hi
      b-col(lg='3')
        b-button Hi
      b-col(lg='3')
        b-button Hi
      b-col(lg='3')
        b-button Hi
      b-col(lg='3')
        b-button Hi
Dave
  • 1
  • 1
  • 9
  • 38

3 Answers3

0

For Bootstrap 4 try this:

<div class="row">
        <div class="col">
           1 of 5
        </div>
        <div class="col">
           2 of 5
        </div>
        <div class="col">
           3 of 5
        </div>
        <div class="col">
           4 of 5
        </div>
        <div class="col">
           5 of 5
        </div>
     </div>

i found it here: Five equal columns in twitter bootstrap

there you can find also solution for previous versions

Good luck

Andrea Viviani
  • 217
  • 1
  • 6
0

Use .row.row-cols-5 on the row and .col for the columns. https://getbootstrap.com/docs/4.5/layout/grid/#row-columns

<div class="container">
  <div class="row row-cols-5">
    <div class="col">
      1 of 6
    </div>
    <div class="col">
      2 of 6
    </div>  
    <div class="col">
      3 of 6
    </div>
    <div class="col">
      4 of 6
    </div>
    <div class="col">
      5 of 6
    </div>
    <div class="col">
      6 of 6 (will be wrapped)
    </div>
  </div>  
</div>
Arleigh Hix
  • 9,990
  • 1
  • 14
  • 31
0

For Bootstrap-3, using offset

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<style>
  .col-inner {
    padding: 40px 20px;
    background: #333;
  }
</style>

<br>

<div class="row">
  <div class="col-xs-2 col-xs-offset-1">
    <div class="col-inner"></div>
  </div>
  <div class="col-xs-2">
    <div class="col-inner"></div>
  </div>
  <div class="col-xs-2">
    <div class="col-inner"></div>
  </div>
  <div class="col-xs-2">
    <div class="col-inner"></div>
  </div>
  <div class="col-xs-2">
    <div class="col-inner"></div>
  </div>
</div>

For Bootstrap-4, using .justify-content-center class for ONLY 5 columns in the row width .col-*-5 class, you can change the screen size if you want-

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>

<style>
  .col-inner {
    padding: 30px;
    background: #333;
    margin: 15px 0;
  }
</style>

<br>

<div class="row justify-content-center">
  <div class="col-2">
    <div class="col-inner"></div>
  </div>
  <div class="col-2">
    <div class="col-inner"></div>
  </div>
  <div class="col-2">
    <div class="col-inner"></div>
  </div>
  <div class="col-2">
    <div class="col-inner"></div>
  </div>
  <div class="col-2">
    <div class="col-inner"></div>
  </div>
</div>

Another way for Bootstrap-4, using .row-cols-* for infinite columns but a specific number of columns (which is 5 in this case) in each row-

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>


<style>
  .col-inner {
    padding: 30px;
    background: #333;
    margin: 15px 0;
  }
</style>

<div class="row row-cols-5">
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
  <div class="col"><div class="col-inner"></div></div>
</div>

Hope it could be some help for you.

Tanim
  • 1,256
  • 8
  • 14