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 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.

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>

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>

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