title: Align two images inline center of a bootstrap col
body: <p>I have a html template andi want to integrate bootstrap into it. I currently have two images in a bootstrap column. I want to keep the two images aligned and next to each other while cetnering both of them in the middle of the of the column. When I try it either doesnt center them or centers them on top of each other which I dont want. I want both images centered and next to each other... Here is my code:</p>
  
  <pre><code>  &lt;div class="row justify-content-center"&gt;
  
          &lt;div class="col-xl-6"&gt;
            &lt;img class="welcome-icon-size align-top center-block" src="{% static 'images/untitled-2.png'%}" alt="Generic placeholder image"&gt;
            &lt;img class="welcome-name-size no-margin-top center-block" src="{% static 'images/untitled-1.png'%}" alt="Generic placeholder image"&gt;
          &lt;/div&gt;
  
    &lt;/div&gt;
  </code></pre>
  
  <p>here is the css:</p>
  
  <pre><code>.no-margin-top {
    margin-top: 0px !important;
  }
  
  .no-padding {
    padding: 0em !important;
  }
  
  .welcome-icon-size {
    height: 9.55em !important;
  }
  
  .welcome-name-size {
    height: 14em !important;
  }
  
  .welcome_title {
    font-size: 1em !important
  }
  
  .welcome-center-items {
    align-items: center !important;
  }
  
  .center-block {
      display: block;
      margin-left: auto;
      margin-right: auto;
   }
  </code></pre>
  
  <p>here is what my image looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/dqAdi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dqAdi.png" alt="enter image description here"></a></p>
  
  <p>I want it to look like the following but centered::</p>
  
  <p><a href="https://i.stack.imgur.com/KkxGS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KkxGS.png" alt="enter image description here"></a></p>
  
  <p>The images are not centered in the screenshot above they are aligned to the left of the column</p>