title: Bootstrap 4 card content not vertically aligning to the middle
body: <p>I have a card and I would like to vertically align the content within the card. I have literally tried everything in the bootstrap 4 guidelines and tutorials that is listed here: </p>
  
  <p><a href="https://v4-alpha.getbootstrap.com/utilities/vertical-align/" rel="nofollow noreferrer">https://v4-alpha.getbootstrap.com/utilities/vertical-align/</a></p>
  
  <p><a href="https://v4-alpha.getbootstrap.com/utilities/flexbox/#align-items" rel="nofollow noreferrer">https://v4-alpha.getbootstrap.com/utilities/flexbox/#align-items</a></p>
  
  <p>Here is my code: </p>
  
  <pre><code>&lt;div class="col-sm-12 col-md-4"&gt;
      &lt;div class="white-card item" data-mh="my-group-2"&gt;
          &lt;div class="white-card-block h-100  justify-content-center"&gt;
               &lt;div class="row"&gt;
                   &lt;div class="left-side"&gt;
                       &lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27.02 20.97"&gt;
                        &lt;defs&gt;
                           &lt;style&gt;
                              .cls-1 {
                                 fill: #ed8b00;
                                 fill-rule: evenodd;
                               }
                           &lt;/style&gt;
                         &lt;/defs&gt;
                      &lt;g id="Layer_1" data-name="Layer 1"&gt;
                          &lt;g id="Guides"&gt;
                               &lt;path class="cls-1" d="M27,4.1a1.67,1.67,0,0,0-.49-1.2L24.16.49a1.68,1.68,0,0,0-2.37,0L10.35,12.09,5.23,6.88a1.68,1.68,0,0,0-2.37,0L.49,9.29A1.67,1.67,0,0,0,0,10.49a1.7,1.7,0,0,0,.49,1.2L6.8,18.08l2.37,2.4a1.68,1.68,0,0,0,2.37,0l2.37-2.4L26.53,5.3A1.7,1.7,0,0,0,27,4.1Z" /&gt;
                           &lt;/g&gt;
                         &lt;/g&gt;
                      &lt;/svg&gt;
                   &lt;/div&gt;
                &lt;div class="right-side"&gt;
                     &lt;h4&gt;&lt;strong&gt;Easy Installation&lt;/strong&gt;&lt;/h4&gt;
                     &lt;p&gt;Easy Installation on new or existing electric and gas tanks&lt;/p&gt;
                &lt;/div&gt;
           &lt;/div&gt;
       &lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p></p>
  
  <p>here is the CSS for my card: </p>
  
  <pre><code>.white-card {
              margin: 15px 0;
              .white-card-block {
                  .left-side {
                      display: inline-block;
                      width: 10%;
                      margin: 0 5%;
                  }
                  .right-side {
                      display: inline-block;
                      width: 80%;
                      p {
                          margin: 0;
                      }
                  }
              }
          }
  </code></pre>
  
  <p>here is an image of what my card looks like currently: <a href="https://i.stack.imgur.com/ag61p.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ag61p.png" alt="enter image description here"></a></p>
  
  <p>Any help will help. I have been picking my brain for hours. Thanks in advance. :) </p>