I am trying to center my Container in the middle of the page using Bootstrap 4. I have been unsuccessful thus far.
I have built it at Codepen.io so it can be played with.
var currentAuthor = "";var currentQuote = "";function randomQuote() { $.ajax({ url: "https://api.forismatic.com/api/1.0/?", dataType: "jsonp", data: "method=getQuote&format=jsonp&lang=en&jsonp=?", success: function( response ) { $("#quote-content").html('<h2 id="quote-content" class="display-5"><i class="fa fa-quote-left" aria-hidden="true"> '+ response.quoteText +'<i class="fa fa-quote-right" aria-hidden="true"></i></h2>'); $("#quote-author").html('<p id="quote-author" class="lead"><em>'+ response.quoteAuthor +'</em></p>'); 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&related=freecodecamp&text='+ encodeURIComponent('"'+ currentQuote +'" - '+ currentAuthor));}$(document).ready(function () { randomQuote(); $("#get-another-quote-button").click(function(){ randomQuote(); }); $('#tweet').on('click', function() { tweetQuote(); });});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;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"><div class="container"><div class="row justify-content-center align-self-center"><div class="col-sm-6"><div class="jumbotron vertical-center text-center"><h2 id="quote-content" class="display-5"><i class="fa fa-quote-left" aria-hidden="true"></i><i class="fa fa-quote-right" aria-hidden="true"></i></h2><p id="quote-author" class="lead"><em></em></p><hr class="my-2"><div class="row align-items-center justify-content-between"><div class="col-sm-1-4 text-left"><a id="tweet" href="#"><h2 class="display-4"><i class="fa fa-twitter" aria-hidden="true"></i></h2></a></div><div class="col-sm-1-4 text-right"><button id="get-another-quote-button" type="button" class="btn btn-outline-secondary btn-new-quote">Don't Quote Me on This...</button></div></div></div></div></div></div>