How to add the number of rows based on odd and even number of bootstrap grid columns

I want to show the bootstrap grid columns with in the row based on the odd and even number of columns.

In below code I have placed for loop so based on the backend data ,it will create the loop of maps.

.component.html

 <div *ngFor="let map of sensors; let i = index" >

    <div class="container">
      <div class="row no-gutters" >
      <!--<div class="col-sm-6 col-md-4 col-lg-3" style="margin-left: -10px;">-->
        <div class="col-sm-4" style="margin-left: -10px;">

        <div id="map{{i}}"  ng-onload="mulmaps(map{{i}});" style="height: 300px;border: 1px solid gray;"></div>

      </div>

For the above code it is creating each row for each map. But now my requirement is based on the number of maps(even or odd) it has to adjust with in the row. (if it is one it has to show one map ,if there are two maps(even)it has to show two maps within the row, if there are three maps (odd)it has to show two maps in one row and one map in another row).

Can anyone help me regarding this.

You loop your whole content, which generate create a row for every map.

If you want to fulfill your requirement then you have to loop the col-sm-6 as per the below code.

<div class="container">
  <div class="row no-gutters">
    <div class="col-sm-6" *ngFor="let map of sensors; let i = index">
      <div id="map{{i}}" ng-onload="mulmaps(map{{i}});" style="height: 300px;border: 1px solid gray;">
      </div>
    </div>
  </div>
</div>