title: How to align columns in Bootstrap 4 with indeterminate number of columns
body: <p>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?</p>
  
  <p>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.</p>
  
  <p><a href="https://i.stack.imgur.com/2YUuS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2YUuS.png" alt="enter image description here"></a></p>
  
  <p>This is my code (Angular 6):</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
    &lt;div class="row"&gt;
      &lt;app-create-room class="col mb-4 d-flex align-items-stretch h-50"&gt;&lt;/app-create-room&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;app-room class="col mb-4 d-flex align-items-stretch" *ngFor="let room of rooms"
                [room]="room"&gt;&lt;/app-room&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>