title: Vertical Align Center in Bootstrap 4
body: <p>I am trying to center my Container in the middle of the page using Bootstrap 4. I have been unsuccessful thus far. Any help would be appreciated.</p>
  
  <p>I have built it at <a href="http://codepen.io/cmseaton42/pen/EZMxem" rel="noreferrer">Codepen.io</a> so you guys can play with it and let me know what works as I am about out of ideas...</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var currentAuthor = "";
  var currentQuote  = "";
  function randomQuote() {
    $.ajax({
        url: "https://api.forismatic.com/api/1.0/?",
        dataType: "jsonp",
        data: "method=getQuote&amp;format=jsonp&amp;lang=en&amp;jsonp=?",
        success: function( response ) {
          $("#quote-content").html('&lt;h2 id="quote-content" class="display-5"&gt;&lt;i class="fa fa-quote-left" aria-hidden="true"&gt; ' + response.quoteText + ' &lt;i class="fa fa-quote-right" aria-hidden="true"&gt;&lt;/i&gt;&lt;/h2&gt;');
          $("#quote-author").html('&lt;p id="quote-author" class="lead"&gt;&lt;em&gt;' + response.quoteAuthor + '&lt;/em&gt;&lt;/p&gt;');
          
          currentAuthor = response.quoteAuthor;
          currentQuote  = response.quoteText
        }
    });
  }
  
  function openURL(url){
    window.open(url,'Share', 'width=550, height=400, toolbar=0, scrollbars=1 ,location=0 ,statusbar=0,menubar=0, resizable=0');
  }
  
  function tweetQuote(){
        openURL('https://twitter.com/intent/tweet?hashtags=quotes,freecodecamp&amp;related=freecodecamp&amp;text=' + encodeURIComponent('"' + currentQuote + '" - ' + currentAuthor));
  }
  
  $(document).ready(function () {
      randomQuote();
  
      $("#get-another-quote-button").click(function(){
          randomQuote();
      });
  
     $('#tweet').on('click', function() {
         tweetQuote();
     });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
    background-image: url("https://www.mylinea.com/wp-content/uploads/beautiful-trees-stock-photo-055.jpg");
      background-color: #17234E;
      margin-bottom: 0;
      min-height: 30%;
      background-repeat: no-repeat;
      background-position: center;
      -webkit-background-size: cover;
      background-size: cover;
  }
  
  
  .btn-new-quote {
      color: #0C0C0D;
      background-color: transparent;
      border-color: #414147;
  }
  
  .btn-new-quote:hover {
      color: #0C0C0D;
      background-color: #9A989E;
      border-color: #0C0C0D;
  }
  
  #tweet {
      color: RGB(100, 100, 100);
  }
  
  #tweet:hover {
      color: RGB(50, 50, 50);
  }
  
  
  .jumbotron {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      opacity: .85;
      border-color:  RGB(50, 50, 50);
      padding-bottom: 8px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"&gt;
  &lt;div class="container"&gt;
      &lt;div class="row justify-content-center align-self-center"&gt;
          &lt;div class="col-sm-6"&gt;
              &lt;div class="jumbotron vertical-center text-center"&gt;
                  &lt;h2 id="quote-content" class="display-5"&gt;&lt;i class="fa fa-quote-left" aria-hidden="true"&gt;&lt;/i&gt;&lt;i class="fa fa-quote-right" aria-hidden="true"&gt;&lt;/i&gt;&lt;/h2&gt;
                  &lt;p id="quote-author" class="lead"&gt;&lt;em&gt;&lt;/em&gt;&lt;/p&gt;
                  &lt;hr class="my-2"&gt;
                  &lt;div class="row align-items-center justify-content-between"&gt;
                      &lt;div class="col-sm-1-4 text-left"&gt;
                          &lt;a id="tweet" href="#"&gt;
                              &lt;h2 class="display-4"&gt;&lt;i class="fa fa-twitter" aria-hidden="true"&gt;&lt;/i&gt;&lt;/h2&gt;
                          &lt;/a&gt;
                      &lt;/div&gt;
                      &lt;div class="col-sm-1-4 text-right"&gt;
                          &lt;button id="get-another-quote-button" type="button" class="btn btn-outline-secondary  btn-new-quote"&gt;Don't Quote Me on This...&lt;/button&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>