I am working on my angular application and need help with styling items in a Bootstrap grid based on the number of elements in an array. Here's what I'm looking to achieve:
- If there are 5 items in the array, I want to display the first two items side by side in one row, the next two items in another row with col-md-6 (50% width), and the fifth item should take up the full width at 100%.
- For 2 items in the array, both should be displayed in one row with 50% width each.
- If only 1 item is present, it should occupy the entire width.
I have included the HTML code snippet below:
<div class="col-md-12">
<div class="row">
<div class="test" *ngFor="let item of array">
<label>test</label>
</div>
</div>
</div>