AngularJS ng-repeat Directive to add rows and columns in bootstrap

In this tutorial I am going to give you perfect guide on generate dynamic rows and columns using ng-repeat directive in bootstrap 3 and 4.

The reason I am writing this tutorial is because in many projects I have been using this solution and it is working perfectly fine without any issues.

I thought it is good idea to write a tutorial on this solution so it will be helpful for other developer I like you. As I see your here because you also want to add bootstrap rows and columns using ng-repeat directive.

Quick and important Note: in this tutorial and going to provide solution on both the popular version of bootstrap that is 3 and 4, in bootstrap 3 it is fairly easy and quick to generate dynamic rows and columns with ng-repeat directive.

However in bootstrap 4 it is little bit repetitive but not bad at all so let’s get started.

Recommend – Laravel 5.5 AngularJS CRUD Operations Application

Generate Bootstrap 3 rows and columns with ng-repeat Directive

Here is the quick and useful example on how we can add bootstrap 3 rows and columns with angularjs ng-repeat directive.

<div class="row">
    <div ng-repeat="item in items track by $index">
        <div class="clearfix" ng-if="$index % 3 == 0"></div>
        <div class="col-sm-4">
        <h2>{{ item.name }}</h2>
        <p>
            {{ item.description }}
        </p>
        </div>
    </div>
</div>

The script is very simple it is generating all the columns in single row but the design will show in grids because we are using an clearfix class within a interval of 3.

The above example will generate 3 columns grid like showing below, however if you want to change columns from 3 to 4 simply update expressions to ng-if="$index % 4 == 0" and similarly if you want to make 2 then ng-if="$index % 2 == 0".

Generate Bootstrap 3 rows and columns with ng-repeat directive

Generate Bootstrap 4 rows and columns with ng-repeat Directive

In bootstrap 4 accordingly to my experiment using clearfix class does not work for me, I had to tweak it further more.

However, if you still want to try above solution in bootstrap 4 and you can do that and see if that works if it works then boom your are good to go but if not then not to worry we have another perfect solution available for specifically bootstrap 4.

Next Let’s see how we can achieve our goal

Add 2 Columns rows Bootstrap 4 AngularJS

Example of generating 2 columns and rows for bootstrap 4 using angularjs ng-repeat directive

      <div
        ng-repeat="item in items track by $index"
        ng-if="$index % 2 == 0"
        class="row"
      >
        <div class="col-md-6">
          <h4>
            {{ items[$index].name }}
          </h4>
          <p>
            {{ items[$index].description }}
          </p>
        </div>
        <div class="col-md-6">
          <h4>
            {{ items[$index + 1].name }}
          </h4>
          <p>
            {{ items[$index + 1].description }}
          </p>
        </div>
      </div>

You can see in the above example we are $index of items object, so basically we are using ng-repeat to iterate items and next while displaying we are again the same items object and simply echoing the content using the $index

It quit seems confusing at first place but it works, you can see screen shot below.

Generate 2 Columns rows Bootstrap 4

Add 3 Columns rows Bootstrap 4 AngularJS

We can apply same logic here with little tweak will have to add one more bootstrap column with next increment index number and change condition to ng-if="$index % 3 == 0" along with the col-md-4 class, look at the example showing below:

      <div
        ng-repeat="item in items track by $index"
        ng-if="$index % 3 == 0"
        class="row"
      >
        <div class="col-md-4">
          <h4>
            {{ items[$index].name }}
          </h4>
          <p>
            {{ items[$index].description }}
          </p>
        </div>
        <div class="col-md-4">
          <h4>
            {{ items[$index + 1].name }}
          </h4>
          <p>
            {{ items[$index + 1].description }}
          </p>
        </div>
        <div class="col-md-4">
          <h4>
            {{ items[$index + 2].name }}
          </h4>
          <p>
            {{ items[$index + 2].description }}
          </p>
        </div>
      </div>
Generate 3 Columns rows Bootstrap 4

Add 4 Columns rows Bootstrap 4 AngularJS

As I already told it is kind of repetitive you will have to keep on adding new columns until you meat your requirements but yes it is not that difficult at all

      <div
        ng-repeat="item in items track by $index"
        ng-if="$index % 3 == 0"
        class="row"
      >
        <div class="col-md-3">
          <h4>
            {{ items[$index].name }}
          </h4>
          <p>
            {{ items[$index].description }}
          </p>
        </div>
        <div class="col-md-3">
          <h4>
            {{ items[$index + 1].name }}
          </h4>
          <p>
            {{ items[$index + 1].description }}
          </p>
        </div>
        <div class="col-md-3">
          <h4>
            {{ items[$index + 2].name }}
          </h4>
          <p>
            {{ items[$index + 2].description }}
          </p>
        </div>
        <div class="col-md-3">
          <h4>
            {{ items[$index + 3].name }}
          </h4>
          <p>
            {{ items[$index + 3].description }}
          </p>
        </div>
      </div>
Generate 4 Columns rows Bootstrap 4

If you find this solution helpful let me know in the comments below.

Yogesh Koli

Software engineer & Blogger live in India, has 8+ years of experience working with the Front-end and Back-end Web Application Development.

View Comments

Recent Posts

Complete guide of using Laravel 6 Eloquent Subquery Enhancements

Learn How to use laravel frameworks new improved feature called Eloquent Subquery and get example…

1 year ago

3 Useful examples of using Array Map function in PHP – Best Practices

Learn how to use php array map function with easy and essential tutorial to modify…

1 year ago

Working with PHP Array Filter Function – Best Practices

Learn how to use php array filter function with easy and essential tutorial to filter…

1 year ago

How to add Access Modifiers with Constructor Parameters in TypeScript

Want to know how to refactor your Typescript class, Learn here utilising Typescript of the…

1 year ago

What is Access Modifiers and how to use Access Modifiers in TypeScript ?

What is Access Modifiers in typescript, how to use Access Modifiers, when to use them,…

1 year ago

Top 10 Super Useful Packages to Improve Laravel applications in 2019

This tutorial provide ultimate list of package those are top 10 on packagist and super…

1 year ago