title: CSS flip card with bootstrap 4
body: <p>I am using an amalgamation of the various posts here and the w3c tutorial on making flip cards work with bootstrap 4.</p>
  
  <p>I have it working execpt for the back face is not the same height as the front face. (I have yet to add meaningful text to the back) I am sure I am missing something like adding a H-100 somewhere but can't seem to get to where I am going wrong.</p>
  
  <p>Could any of you see any issues in my code? </p>
  
  <pre><code>&lt;a href="" class=""&gt;
            &lt;div class="card-flip"&gt;
              &lt;div class="card-flip-inner"&gt;
                &lt;div class="card-flip-front"&gt;
                  &lt;div class="card shadow-sm"&gt;
                    &lt;div class="card-body"&gt;
                      &lt;div class="row"&gt;
                        &lt;div class="col text-center"&gt;
                          &lt;i class="fas fa-route fa-3x text-msp-orange"&gt;&lt;/i&gt;
                        &lt;/div&gt;
                        &lt;div class="col-10 text-right"&gt;
                          &lt;h3 class="text-msp-darkblue text-uppercase mb-0"&gt;&lt;b&gt;&lt;?php echo $log-&gt;post_title; ?&gt;&lt;/b&gt;&lt;/h3&gt;
                          &lt;p class="text-secondary mt-0"&gt;
                            &lt;?php echo $log-&gt;post_description; ?&gt;
                          &lt;/p&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;hr /&gt;
                      &lt;div class="row"&gt;
                        &lt;div class="col"&gt;
                          &lt;p class="text-secondary text-justify mb-0 pb-0"&gt;
                            &lt;?php echo shortenEcho($log-&gt;post_body, 250); ?&gt;
                          &lt;/p&gt;
                          &lt;span class="text-secondary float-right mt-0 pt-0"&gt;&lt;?php echo date('D jS F Y', strtotime($log-&gt;post_createdOn)); ?&gt;&lt;/span&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="card-footer"&gt;
                      &lt;div class="row"&gt;
                        &lt;div class="col-sm-12 col-md-12 col-lg-4 col-xl-4 text-center text-secondary card-vertical-divider"&gt;
                          &lt;i class="fas fa-wind fa-2x text-msp-lightblue"&gt;&lt;/i&gt;&lt;br /&gt;
                          &lt;b&gt;Force 4&lt;/b&gt;
                        &lt;/div&gt;
                        &lt;div class="col-sm-12 col-md-12 col-lg-4 col-xl-4 text-center text-secondary card-vertical-divider"&gt;
                          &lt;i class="fas fa-water fa-2x text-msp-lightblue"&gt;&lt;/i&gt;&lt;br /&gt;
                          &lt;b&gt;Moderate&lt;/b&gt;
                        &lt;/div&gt;
                        &lt;div class="col-sm-12 col-md-12 col-lg-4 col-xl-4 text-secondary text-center"&gt;
                          &lt;i class="fas fa-cloud-sun fa-2x text-msp-lightblue"&gt;&lt;/i&gt;&lt;br /&gt;
                          &lt;b&gt;Sunny&lt;/b&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="card-flip-back h-100"&gt;
                  &lt;div class="card shadow-sm bg-msp-lightblue"&gt;
                    &lt;div class="card-body text-white h-100"&gt;
                      some text
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
        &lt;/a&gt;
  </code></pre>
  
  <p>And my CSS is...</p>
  
  <pre><code>.card-flip {
    perspective: 1000px;
  }
  
  .card-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    backface-visibility: hidden;
  }
  
  /* Do an horizontal flip when you move the mouse over the flip box container */
  .card-flip:hover .card-flip-inner {
    transform: rotateY(180deg);
  }
  
  /* Position the front and back side */
  .card-flip-front, .card-flip-back {
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
  }
  
  /* Style the back side */
  .card-flip-back {
    transform: rotateY(180deg);
    position: absolute;
    top: 0;
    left: 0;
  }
  </code></pre>
  
  <p>UPDATE:  I think I have found the answer...</p>
  
  <p>I have added a H-100 to the <code>&lt;div class="card h-100 shadow-sm"&gt;</code>
  And also to the...</p>
  
  <pre><code>&lt;div class="card-flip-back"&gt;
  &lt;div class="card shadow-sm h-100 bg-msp-lightblue"&gt;
  &lt;div class="card-body mx-auto text-white h-100"&gt;
  some text
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Just need to center the text in the card vertically now and we are all good :-)
                </p>