title: How to align 5 images in a row in bootstrap grid system?
body: <p>I have a screenshot as show below which I have replicated by using bootstrap 4.1 </p>
  
  <p><a href="https://i.stack.imgur.com/fXaSt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fXaSt.png" alt="enter image description here"></a></p>
  
  <p>Here is the <a href="https://jsfiddle.net/7nzvby9o/embedded/result" rel="nofollow noreferrer">fiddle</a> for that <strong>but it is still not properly aligned as images are very close to each other</strong>. </p>
  
  <p>The HTML code which I have used in the fiddle in order to replicate the above screenshot is:</p>
  
  <pre><code>&lt;div class="container text-center border"&gt;
  &lt;div class="hello_world"&gt;
     &lt;img src="https://image.ibb.co/fxj2nJ/image1.png" alt="image1"&gt;
     &lt;img src="https://image.ibb.co/gZyHMd/image2.png" alt="image2"&gt;
     &lt;img src="https://image.ibb.co/mGTpZy/image3.png" alt="image3"&gt;
     &lt;img src="https://image.ibb.co/bZkKZy/image4.png" alt="image4"&gt;
     &lt;img src="https://image.ibb.co/dF42nJ/image5.png" alt="image5"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><br></p>
  
  <p><strong>Problem Statement:</strong> </p>
  
  <p>I am wondering how I can use bootstrap grid system in order to replicate the above screenshot. As there are 5 images, so I am not sure how I can divide list of 5 images into sum of 12. </p>