Currently, the code is displaying images top to bottom.
<tr ng-repeat='b in Brands = (Brands | firstLetter:activeLetter)'>
<td><img src="http://localhost/{{ b.image }}" alt="" border=3 height=75 width=75><br><br></td>
</tr>
My goal is to display the images side by side and once the screen width is exceeded, move to the next row. Is this achievable in AngularJS / ui-bootstrap?
If not through AngularJS / ui-bootstrap, what would be the most effective approach to achieve this?
EDIT: This logic has been successful for me:
<div class="container">
<div ng-repeat="b in Brands = (Brands | firstLetter:activeLetter)" ng-if="$index % 12 == 0" class="row">
<div class="col-xs-1" ng-repeat="idx in [0, 1, 2, 3, 4, 5, 6, 7, 9, 10, 11]">
<img src="http://localhost/{{ Brands[idx+$parent.$index].image }}" alt="" border=3 height=75 width=75>
</div>
</div>
</div>
However, it displays empty boxes if there are fewer than 12 remaining images.
https://i.sstatic.net/bhxRJ.png
Does anyone know how to remove these empty boxes in the last row and possibly align the images in a centered position or another visually appealing way?