12

I have 15 records, I want to show all of it in a 5 columns per row. So I am using the auto column available in bootstrap 4 ".col", is there a way to limit column counts per row?

Note: I have to continuously loop the columns without breaking the row.

I want to achieve something like this

[ 1][ 2][ 3][ 4][ 5]
[ 6][ 7][ 8][ 9][10]
[11][12][13][14][15]

Here's my current code:

<div class="row">
    <!-- this will create 15 col -->
    <div class="col" ng-repeat="record in records">
        {{record.title}}
    </div>
</div>

But this results to:

[1][2][3][4][5][6][7][8][9][10][11][12][13][14][15]
mahan
  • 12,366
  • 5
  • 48
  • 83
Christopher
  • 540
  • 2
  • 6
  • 33
  • 1
    Bootstrap should automatically break rows on overflow. Can you try with col-3? If not, try to wrap the row in a div that has the class container. – Hypenate Jun 07 '18 at 07:29
  • @Hypenate 4 columns per row should you use `col-3`. – mahan Jun 07 '18 at 07:47
  • just add that line after your div.col `
    ` see [Equal-width multi-row](https://getbootstrap.com/docs/4.1/layout/grid/#equal-width-multi-row)     – oCcSking Oct 28 '19 at 15:37

4 Answers4

27

Updated 2019/12/02

For Bootstrap < 4.4 : Get rid of these Bootstrap columns and just use the magic of flexboxes.

Just add my .w-20 class to your CSS.

See it in action in my fiddle.

For Bootstrap >= 4.4 : Use the brand new row-cols-* classes

Add .row-cols-5 to your .row containing elements. No custom CSS needed.

See the 4.4 doc here : https://getbootstrap.com/docs/4.4/layout/grid/#row-columns

Now play with my fiddle and observe the same results in my fiddle with both techniques :

.w-20 {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 20% !important;
          flex: 0 0 20% !important;
  max-width: 20%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row my-4">
    <div class="col">
      <div class="jumbotron">
        <h1>Bootstrap 4 - How to set 5 columns per row</h1>
        <p class="lead">by djibe.</p>
        <p class="text-muted">(thx to BS4)</p>
        <h2>Tutorial</h2>
        <h3>With Bootstrap 4.4+</h3>
        <p>Just add <code>row-cols-5</code> to the row containing your elements</p>
        <div class="container-fluid">
          <div class="row row-cols-5">
            <div class="col card card-body">
            .col
            </div>
            <div class="col card card-body">
            .col
            </div>
            <div class="col card card-body">
            .col
            </div>
            <div class="col card card-body">
            .col
            </div>
            <div class="col card card-body">
            .col
            </div>
            <div class="col card card-body">
            .col
            </div>
            <div class="col card card-body">
            .col
            </div>
          </div>
        </div>
        <hr class="my-5">
        <h3>With Bootstrap &lt; 4.4</h3>
        <ol>
        <li>We gonna use the magic of CSS3 flexboxes ... or just import row-cols-* classes from BS 4.4.</li>
        <li>Apply the class .w-20 on each element, it will spread each element on 1/5th of the width or row</li>
        <li>Apply the built-in Bootstrap 4 classes d-flex and flex-wrap to the container of these 15 elements</li>
        <li>Et voilà</li>
        <li>This fiddle is crap so I had to add the !important definition to my CSS class. But you can get rid of them in your project.</li>
        </ol>
        <div class="d-flex flex-wrap">
          <div class="card card-body w-20">
          <p>
          Card 1
          </p>
          <p>
          Extra long content compared to the cards of the same row but all the elements will have the same height
          </p>
          </div>
          <div class="card card-body w-20">
          Card 2
          </div>
          <div class="card card-body w-20">
          Card 3
          </div>
          <div class="card card-body w-20">
          Card 4
          </div>
          <div class="card card-body w-20">
          Card 5
          </div>
          <div class="card card-body w-20">
          Card 6
          </div>
          <div class="card card-body w-20">
          Card 7
          </div>
          <div class="card card-body w-20">
          Card 8
          </div>
          <div class="card card-body w-20">
          Card 9
          </div>
          <div class="card card-body w-20">
          Card 10
          </div>
          <div class="card card-body w-20">
          Card 11
          </div>
          <div class="card card-body w-20">
          Card 12
          </div>
          <div class="card card-body w-20">
          Card 13
          </div>
          <div class="card card-body w-20">
          Card 14
          </div>
          <div class="card card-body w-20">
          Card 15
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
djibe
  • 2,753
  • 2
  • 17
  • 26
  • thanks for share this idea, i think this is the best way to make column as per requirement. – Rohit Verma Aug 11 '18 at 05:04
  • This works perfectly, though there is an issue where it doesn't break the row for mobile view, like it does if I use col-md-* or anything else. – Sarmad Khalil Jan 03 '20 at 05:10
4

If you're working with Bootstrap 4 scss files, then the easiest way is to use default mixin make-col(x,y). For example this code in a layout of 5 columns will create element that covers width of 2 columns. Basically it's 2/5 = 40%:

.my-col {
    @include make-col(2, 5);
}

This will result in following css:

.my-col {
    flex: 0 0 40%;
    max-width: 40%;
}
Sharak
  • 888
  • 8
  • 17
3

In the newest version of bootstrap, you can do that by using row-cols-* classes.

eg: row-cols-3, row-cols-md-3 like this.

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

For more details to Visit

Rajitha Udayanga
  • 1,559
  • 11
  • 21
2

Seems you use AngularJS. If so, use an ng-reapt-start and ng-repeat-end and track the items of the list by $index. Use a break columns and show it only when ($index + 1) is 5, 10, or 15.

var app = angular.module('breakColumn', []);

app.controller('MainCtrl', function($scope) {
  $scope.list = [];
  for (let i = 1; i < 16; i++) {
    $scope.list.push(i)
  }
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<div class="container" ng-app="breakColumn">
  <div class="row" ng-controller="MainCtrl">
    <div class="col bg-primary p-4 mb-3" ng-repeat-start="item in list track by $index" ng-init="itemIndex = $index">
      {{item}}
    </div>
    <!-- break column -->
    <div class="w-100" ng-repeat-end ng-if="(itemIndex +1) % 5 === 0"></div>
  </div>
</div>
mahan
  • 12,366
  • 5
  • 48
  • 83