2

For the page I am building I do not need a fixed number of columns, I just want best fit. In bootstrap I am doing this by just adding columns to the same row. This nearly works perfectly, but if the last rendered row doesn't have the same amount of elements as the row above, it is spreading the columns over the available space. I want to align the bottom row to the columns above, starting from the left. Is this possible?

This is what I have at the moment, I want the bottom row elements to align from the left with the elements above. I don't want a fixed number of columns though.

enter image description here

This is my code (Angular 6):

<div class="container-fluid">
  <div class="row">
    <app-create-room class="col mb-4 d-flex align-items-stretch h-50"></app-create-room>
  </div>
  <div class="row">
    <app-room class="col mb-4 d-flex align-items-stretch" *ngFor="let room of rooms"
              [room]="room"></app-room>
  </div>
</div>
Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
Si-N
  • 1,495
  • 1
  • 13
  • 27
  • As per grid in bootstrap you can have maximum of 12 elements in a row stating 1 col for each, and in your case you have to explicitly define col as col-2 for your last row to align it as per the above row's elements – Deepak Verma Jul 23 '18 at 13:45
  • 1
    Or use col-auto https://stackoverflow.com/questions/50918774/bootstrap4-grid-system-align-cols-to-be-close-to-each-other/50925667#50925667 – Carol Skelly Jul 23 '18 at 13:49

0 Answers0