title: Centering 2 images with label in a row in Bootstrap
body: <p>The goal is that I want both images to have be side by side and centered in the middle of the row.</p>
  
  <p>I tried to do that via adjusting the columns of the row</p>
  
  <p><strong>The problem is that even with trying to center via rows, it always looks a little off center and if I change the max-width to be a little bigger, the images are no longer side by side and are on top of one another</strong></p>
  
  <p>The height and width of the images are...</p>
  
  <ul>
  <li>graft1/graft2 - height="333" width="500"</li>
  <li>ivan1/ivan2 - height="542" width="400"</li>
  </ul>
  
  <p>Here is my HTML</p>
  
  <pre><code>    &lt;section class="wrapper style1"&gt;
          &lt;div class="container"&gt;
              &lt;div id="content"&gt;
                  &lt;!-- Content --&gt;
                  &lt;article&gt;
                      &lt;header&gt;
                          &lt;h2&gt;Before and After&lt;/h2&gt;
                      &lt;/header&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="div_baPics"&gt;
                              &lt;img id="graft1" class="baPics" src="images/graft1.jpg" alt=""&gt;
                              &lt;label for="graft1"&gt;Before&lt;/label&gt;
                              &lt;img id="graft2" class="baPics" src="images/graft2.jpg" alt=""&gt;
                              &lt;label for="graft2"&gt;After&lt;/label&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="div_baPics"&gt;
                              &lt;img id="ivan1" class="baPics" src="images/ivan1.jpg" alt=""&gt;
                              &lt;label for="ivan1"&gt;Before&lt;/label&gt;
                              &lt;img id="ivan2" class="baPics" src="images/ivan2.jpg" alt=""&gt;
                              &lt;label for="ivan2"&gt;After&lt;/label&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/article&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  </code></pre>
  
  <p>And here is the CSS for baPics</p>
  
  <pre><code>.baPics {
      max-width: 30%;
  }
  
      .div_baPics {
          text-align: center;
      }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/O7KV2.png" alt="enter image description here"></p>