[html] Vertical Align Center in Bootstrap 4

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.

I have built it at Codepen.io so you guys can play with it and let me know what works as I am about out of ideas...

_x000D_
_x000D_
var currentAuthor = "";_x000D_
var currentQuote  = "";_x000D_
function randomQuote() {_x000D_
  $.ajax({_x000D_
      url: "https://api.forismatic.com/api/1.0/?",_x000D_
      dataType: "jsonp",_x000D_
      data: "method=getQuote&format=jsonp&lang=en&jsonp=?",_x000D_
      success: function( response ) {_x000D_
        $("#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>');_x000D_
        $("#quote-author").html('<p id="quote-author" class="lead"><em>' + response.quoteAuthor + '</em></p>');_x000D_
        _x000D_
        currentAuthor = response.quoteAuthor;_x000D_
        currentQuote  = response.quoteText_x000D_
      }_x000D_
  });_x000D_
}_x000D_
_x000D_
function openURL(url){_x000D_
  window.open(url,'Share', 'width=550, height=400, toolbar=0, scrollbars=1 ,location=0 ,statusbar=0,menubar=0, resizable=0');_x000D_
}_x000D_
_x000D_
function tweetQuote(){_x000D_
      openURL('https://twitter.com/intent/tweet?hashtags=quotes,freecodecamp&related=freecodecamp&text=' + encodeURIComponent('"' + currentQuote + '" - ' + currentAuthor));_x000D_
}_x000D_
_x000D_
$(document).ready(function () {_x000D_
    randomQuote();_x000D_
_x000D_
    $("#get-another-quote-button").click(function(){_x000D_
        randomQuote();_x000D_
    });_x000D_
_x000D_
   $('#tweet').on('click', function() {_x000D_
       tweetQuote();_x000D_
   });_x000D_
});
_x000D_
html, body {_x000D_
  background-image: url("https://www.mylinea.com/wp-content/uploads/beautiful-trees-stock-photo-055.jpg");_x000D_
    background-color: #17234E;_x000D_
    margin-bottom: 0;_x000D_
    min-height: 30%;_x000D_
    background-repeat: no-repeat;_x000D_
    background-position: center;_x000D_
    -webkit-background-size: cover;_x000D_
    background-size: cover;_x000D_
}_x000D_
_x000D_
_x000D_
.btn-new-quote {_x000D_
    color: #0C0C0D;_x000D_
    background-color: transparent;_x000D_
    border-color: #414147;_x000D_
}_x000D_
_x000D_
.btn-new-quote:hover {_x000D_
    color: #0C0C0D;_x000D_
    background-color: #9A989E;_x000D_
    border-color: #0C0C0D;_x000D_
}_x000D_
_x000D_
#tweet {_x000D_
    color: RGB(100, 100, 100);_x000D_
}_x000D_
_x000D_
#tweet:hover {_x000D_
    color: RGB(50, 50, 50);_x000D_
}_x000D_
_x000D_
_x000D_
.jumbotron {_x000D_
    position: relative;_x000D_
    top: 50%;_x000D_
    transform: translateY(-50%);_x000D_
    opacity: .85;_x000D_
    border-color:  RGB(50, 50, 50);_x000D_
    padding-bottom: 8px;_x000D_
}
_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">_x000D_
<div class="container">_x000D_
    <div class="row justify-content-center align-self-center">_x000D_
        <div class="col-sm-6">_x000D_
            <div class="jumbotron vertical-center text-center">_x000D_
                <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>_x000D_
                <p id="quote-author" class="lead"><em></em></p>_x000D_
                <hr class="my-2">_x000D_
                <div class="row align-items-center justify-content-between">_x000D_
                    <div class="col-sm-1-4 text-left">_x000D_
                        <a id="tweet" href="#">_x000D_
                            <h2 class="display-4"><i class="fa fa-twitter" aria-hidden="true"></i></h2>_x000D_
                        </a>_x000D_
                    </div>_x000D_
                    <div class="col-sm-1-4 text-right">_x000D_
                        <button id="get-another-quote-button" type="button" class="btn btn-outline-secondary  btn-new-quote">Don't Quote Me on This...</button>_x000D_
                    </div>_x000D_
_x000D_
                </div>_x000D_
            </div>_x000D_
        </div>_x000D_
    </div>_x000D_
</div>
_x000D_
_x000D_
_x000D_

This question is related to html css twitter-bootstrap flexbox bootstrap-4

The answer is


Important! Vertical center is relative to the height of the parent

If the parent of the element you're trying to center has no defined height, none of the vertical centering solutions will work!

Now, onto vertical centering...

Bootstrap 5 (Updated 2020)

Bootstrap 5 is still flexbox based so vertical centering works the same way as Bootstrap 4. For example align-items-center and justify-content-center can used on the flexbox parent (row or d-flex). https://codeply.com/p/0VM5MJ7Had

Bootstrap 4

You can use the new flexbox & size utilities to make the container full-height and display: flex. These options don't require extra CSS (except that the height of the container (ie:html,body) must be 100%).

Option 1 align-self-center on flexbox child

<div class="container d-flex h-100">
    <div class="row justify-content-center align-self-center">
     I'm vertically centered
    </div>
</div>

https://codeply.com/go/fFqaDe5Oey

Option 2 align-items-center on flexbox parent (.row is display:flex; flex-direction:row)

<div class="container h-100">
    <div class="row align-items-center h-100">
        <div class="col-6 mx-auto">
            <div class="jumbotron">
                I'm vertically centered
            </div>
        </div>
    </div>
</div>

enter image description here

https://codeply.com/go/BumdFnmLuk

Option 3 justify-content-center on flexbox parent (.card is display:flex;flex-direction:column)

<div class="container h-100">
    <div class="row align-items-center h-100">
        <div class="col-6 mx-auto">
            <div class="card h-100 border-primary justify-content-center">
                <div>
                    ...card content...
                </div>
            </div>
        </div>
    </div>
</div>

https://codeply.com/go/3gySSEe7nd


More on Bootstrap 4 Vertical Centering

Now that Bootstrap 4 offers flexbox and other utilities, there are many approaches to vertical alignment. http://www.codeply.com/go/WG15ZWC4lf

1 - Vertical Center Using Auto Margins:

Another way to vertically center is to use my-auto. This will center the element within it's container. For example, h-100 makes the row full height, and my-auto will vertically center the col-sm-12 column.

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

Vertical Center Using Auto Margins Demo

my-auto represents margins on the vertical y-axis and is equivalent to:

margin-top: auto;
margin-bottom: auto;

2 - Vertical Center with Flexbox:

vertical center grid columns

Since Bootstrap 4 .row is now display:flex you can simply use align-self-center on any column to vertically center it...

       <div class="row">
           <div class="col-6 align-self-center">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

or, use align-items-center on the entire .row to vertically center align all col-* in the row...

       <div class="row align-items-center">
           <div class="col-6">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

Vertical Center Different Height Columns Demo

See this Q/A to center, but maintain equal height


3 - Vertical Center Using Display Utils:

Bootstrap 4 has display utils that can be used for display:table, display:table-cell, display:inline, etc.. These can be used with the vertical alignment utils to align inline, inline-block or table cell elements.

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">
            I am centered vertically
        </div>
    </div>
</div>

Vertical Center Using Display Utils Demo

More examples
Vertical center image in <div>
Vertical center .row in .container
Vertical center and bottom in <div>
Vertical center child inside parent
Vertical center full screen jumbotron


Important! Did I mention height?

Remember vertical centering is relative to the height of the parent element. If you want to center on the entire page, in most cases, this should be your CSS...

body,html {
  height: 100%;
}

Or use min-height: 100vh (min-vh-100 in Bootstrap 4.1+) on the parent/container. If you want to center a child element inside the parent. The parent must have a defined height.

Also see:
Vertical alignment in bootstrap 4
Bootstrap 4 Center Vertical and Horizontal Alignment


Similar questions with html tag:

Similar questions with css tag:

Similar questions with twitter-bootstrap tag:

Similar questions with flexbox tag:

Similar questions with bootstrap-4 tag: