Bootstrap 4 card content not vertically aligning to the middle

Question

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:

https://v4-alpha.getbootstrap.com/utilities/vertical-align/

https://v4-alpha.getbootstrap.com/utilities/flexbox/#align-items

Here is my code:

<div class="col-sm-12 col-md-4">
    <div class="white-card item" data-mh="my-group-2">
        <div class="white-card-block h-100  justify-content-center">
             <div class="row">
                 <div class="left-side">
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27.02 20.97">
                      <defs>
                         <style>
                            .cls-1 {
                               fill: #ed8b00;
                               fill-rule: evenodd;
                             }
                         </style>
                       </defs>
                    <g id="Layer_1" data-name="Layer 1">
                        <g id="Guides">
                             <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" />
                         </g>
                       </g>
                    </svg>
                 </div>
              <div class="right-side">
                   <h4><strong>Easy Installation</strong></h4>
                   <p>Easy Installation on new or existing electric and gas tanks</p>
              </div>
         </div>
     </div>
</div> 

here is the CSS for my card:

.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;
                    }
                }
            }
        }

here is an image of what my card looks like currently:

Any help will help. I have been picking my brain for hours. Thanks in advance. :)

Answer 1

I removed your row div cause it was unecessary and replaced the class justify-content-center for two classes d-flex align-items-center. I also added these two classes to the left-side div

I defined width and height in the svg tag cause it was not showing for me

Here is the example in fiddle

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<div class="col-sm-12 col-md-4">
    <div class="white-card item" data-mh="my-group-2">
        <div class="white-card-block h-100 d-flex align-items-center">
                 <div class="left-side d-flex align-items-center">
                     <svg width="30" height="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27.02 20.97">
                      <defs>
                         <style>
                            .cls-1 {
                               fill: #ed8b00;
                               fill-rule: evenodd;
                             }
                         </style>
                       </defs>
                    <g id="Layer_1" data-name="Layer 1">
                        <g id="Guides">
                             <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" />
                         </g>
                       </g>
                    </svg>
                 </div>
              <div class="right-side">
                   <h4><strong>Easy Installation</strong></h4>
                   <p>Easy Installation on new or existing electric and gas tanks</p>
              </div>
         </div>
     </div>
</div> 

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

CSS

.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;
                        }
                    }
                }
            }