CODEWITHSUNDEEP
angularjstwitter-bootstrap
Coding Duchess
Coding Duchess

Reputation: 6919

Displaying 12 records per row with bootstrap, the remainder should go to the next row

I am trying to display a dynamic number of users in the bootstrap grid:

<div class="row">
    <div ng-repeat="Contact in Contacts" class="col-md-{{12 / Contacts.Count}}">
        <img ng-src="../../Images/{{Contact.ContactImage}}.png" alt="{{Contacts.Name}}" />
        <h4 class="subtitle">{{Contacts.FullName}}</h4>
    </div>
</div>

The above works while there are less than 12 contacts. But if there are more, I want them to go to the next row. Is there a way to do that?

Upvotes: 0

Views: 245

Answers (2)

Aniket Sinha
Aniket Sinha

Reputation: 6031

As you must be aware that bootstrap scales up to 12 columns. So, in order to include 12 columns in a row, you need to divide your row in 12 equal sized columns. And col-md-1 does just that. Additionally, you can also use col-sm-1 col-xs-1 as per your viewport requirement. Change your code to: <div ng-repeat="Contact in Contacts" class="col-md-1">

You can skip this class="col-md-{{12 / Contacts.Count}}", as you are already aware of you 12-column requirement. In case your Contacts.Count is 5, then in that case, 12/5 = 2.4, and there is no such class as col-md-2.4 in bootstrap.

Upvotes: 1

michael
michael

Reputation: 758

Bootstrap's grid system automatically wraps overflowing columns to the next row by default, so you don't technically need to change your current code at all. For instance...

<div class="row">
    <div class="col-md-6">I'm in the first row</div>
    <div class="col-md-6">I'm in the first row</div>
    <div class="col-md-6">I'm in the second row!!!!!!</div>
</div>

If you want to actually use a separate div row for each set of 12 columns; that's easily doable as well. Just create two loops like so:

var contacts = [{...}, {...}, ...]; // assume this is an array of 20 objects

for (var i = 0, n = Math.ceil(contacts.length/12); i < n; i++) {
    // print <div class="row"> here
    for (var j = i*12; j < Math.min(i*12+12, contacts.length); j++) {
        console.log('row', i, 'col', j);
        // print <div class="col-md-1">contacts[j].RANDOM_DATA</div> here
    }
    // print </div> here
}

Here's a super basic/quick fiddle to demonstrate: https://jsfiddle.net/67L1h1v5/

Upvotes: 0

Related Questions