title: How to align three images on a row
body: <p>There will be a certain amount of images in database which is <strong>unknown</strong> when this page is being redirected, which means I can't set the amount of <em>div</em> accordingly. What I am after is no matter how many images are there, I would like to display it in a manner of three images in a row, the fourth one will start from the left side of a new row. I try to use col-md-4 try to align three images on a row, but the fourth image is either on the center or right side of the next row ?</p>
  
  <p><a href="https://i.stack.imgur.com/pAchq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pAchq.png" alt="enter image description here"></a></p>
  
  <p>This is what I am after. Let's say there are 5 images in database, I would like it to be displayed like this</p>
  
  <p><a href="https://i.stack.imgur.com/GQpRV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GQpRV.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;div class="row col-md-12"&gt;
      @foreach($images as $image)
          &lt;div class="col-md-4"&gt;
              &lt;img src="{{ $image-&gt;image }}" alt="{!! $image-&gt;title !!}" width="50%" height="auto" &gt;
              &lt;div class="btn btn-primary edit-image-btn"&gt;Edit&lt;/div&gt;
              &lt;div class="btn btn-danger delete-image-btn"&gt;Delete&lt;/div&gt;
          &lt;/div&gt;
      @endforeach
  &lt;/div&gt;
  </code></pre>