[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


I did it this way with Bootstrap 4.3.1:

<div class="d-flex vh-100">
  <div class="d-flex w-100 justify-content-center align-self-center">
    I'm in the middle
  </div>
</div>

I've tried all the answers herefrom, but found out here is the difference between h-100 and vh-100 Here is my solution:

      <div className='container vh-100 d-flex align-items-center col justify-content-center'>
        <div className="">
             ...
        </div>
      </div >


Place your content within a flexbox container that is 100% high i.e h-100. Then justify the content centrally by using justify-content-center class.

<section class="container h-100 d-flex justify-content-center">
    <div class="jumbotron my-auto">
        <h1 class="display-3">Hello, Malawi!</h1>
    </div>
</section>

In Bootstrap 4 (beta), use align-middle. Refer to Bootstrap 4 Documentation on Vertical alignment:

Change the alignment of elements with the vertical-alignment utilities. Please note that vertical-align only affects inline, inline-block, inline-table, and table cell elements.

Choose from .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, and .align-text-top as needed.


.jumbotron {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Because none of the above worked for me, I am adding another answer.

Goal: To vertically and horizontally align a div on a page using bootstrap 4 flexbox classes.

Step 1: Set your outermost div to a height of 100vh. This sets the height to 100% of the Veiwport Height. If you don't do this, nothing else will work. Setting it to a height of 100% is only relative to the parent, so if the parent is not the full height of the viewport, nothing will work. In the example below, I set the Body to 100vh.

Step 2: Set the container div to be the flexbox container with the d-flex class.

Step 3: Center div horizontally with the justify-content-center class.

Step 4: Center div vertically with the align-items-center

Step 5: Run page, view your vertically and horizontally centered div.

Note that there is no special class that needs to be set on the centered div itself (the child div)

<body style="background-color:#f2f2f2; height:100vh;">

<div class="h-100 d-flex justify-content-center align-items-center">
    <div style="height:600px; background-color:white; width:600px;">
</div>

</div>

</body>

In Bootstrap 4.1.3:

This worked for me when I was trying to center a bootstrap badge inside of a container > row > column next to a h1 title.

What did work was some simple css:

.my-valign-center {
  vertical-align: 50%;
}

or

<span class="badge badge-pill" style="vertical-align: 50%;">My Badge</span>

use .my-auto (bootsrap4) css class on yor div


<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</head>
<body>  
<div class="container">
    <div class="row align-items-center justify-content-center" style="height:100vh;">     
         <div>Center Div Here</div>
    </div>
</div>
</body>
</html>

Vertical align Using this bootstrap 4 classes:

parent: d-table

AND

child: d-table-cell & align-middle & text-center

eg:

<div class="tab-icon-holder d-table bg-light">
   <div class="d-table-cell align-middle text-center">
     <img src="assets/images/devices/Xl.png" height="30rem">
   </div>
</div>

and if you want parent be circle:

<div class="tab-icon-holder d-table bg-light rounded-circle">
   <div class="d-table-cell align-middle text-center">
     <img src="assets/images/devices/Xl.png" height="30rem">
   </div>
</div>

which two custom css classes are as follow:

.tab-icon-holder {
  width: 3.5rem;
  height: 3.5rem;
 }
.rounded-circle {
  border-radius: 50% !important
}

Final usage can be like for example:

<div class="col-md-5 mx-auto text-center">
    <div class="d-flex justify-content-around">
     <div class="tab-icon-holder d-table bg-light rounded-circle">
       <div class="d-table-cell align-middle text-center">
         <img src="assets/images/devices/Xl.png" height="30rem">
       </div>
     </div>

     <div class="tab-icon-holder d-table bg-light rounded-circle">
       <div class="d-table-cell align-middle text-center">
         <img src="assets/images/devices/Lg.png" height="30rem">
       </div>
     </div>

     ...

    </div>
</div>

Also in some cases you can use following code:

parent: h-100 d-table mx-auto

AND

child: d-table-cell & align-middle


you can vertically align your container by making the parent container flex and adding align-items:center:

body {
  display:flex;
  align-items:center;
}

Updated Pen


<div class="row">
  <div class="col-md-6">
     <img src="/assets/images/ebook2.png" alt="" class="img-fluid">
  </div>
  <div class="col-md-6 my-auto">
     <h3>Heading</h3>
     <p>Some text.</p>
   </div>
</div>

This line is where the magic happens <div class="col-md-6 my-auto">, the my-auto will center the content of the column. This works great with situations like the code sample above where you might have a variable sized image and need to have the text in the column to the right line up with it.


<div class="col-lg-5 col-sm-5 offset-1 d-flex">
            <div class="offer-txt justify-content-center align-self-center">
                <span class="inner-title">Our Offer</span>
                <h2 class="section-title">Today’s Special </h2>
                <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly.</p>
            </div>
        </div>

enter image description here


Following bootstrap 4 classes helped me solve this

<div class="col text-center justify-content-center align-self-center">
    <img width=3rem src=".." alt="...">
</div>

Examples related to html

Embed ruby within URL : Middleman Blog Please help me convert this script to a simple image slider Generating a list of pages (not posts) without the index file Why there is this "clear" class before footer? Is it possible to change the content HTML5 alert messages? Getting all files in directory with ajax DevTools failed to load SourceMap: Could not load content for chrome-extension How to set width of mat-table column in angular? How to open a link in new tab using angular? ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment

Examples related to css

need to add a class to an element Using Lato fonts in my css (@font-face) Please help me convert this script to a simple image slider Why there is this "clear" class before footer? How to set width of mat-table column in angular? Center content vertically on Vuetify bootstrap 4 file input doesn't show the file name Bootstrap 4: responsive sidebar menu to top navbar Stylesheet not loaded because of MIME-type Force flex item to span full row width

Examples related to twitter-bootstrap

Bootstrap 4: responsive sidebar menu to top navbar CSS class for pointer cursor How to install popper.js with Bootstrap 4? Change arrow colors in Bootstraps carousel Search input with an icon Bootstrap 4 bootstrap 4 responsive utilities visible / hidden xs sm lg not working bootstrap.min.js:6 Uncaught Error: Bootstrap dropdown require Popper.js Bootstrap 4 - Inline List? Bootstrap 4, how to make a col have a height of 100%? Bootstrap 4: Multilevel Dropdown Inside Navigation

Examples related to flexbox

Force flex item to span full row width vuetify center items into v-flex Equal height rows in CSS Grid Layout display: flex not working on Internet Explorer Center the content inside a column in Bootstrap 4 Vertical Align Center in Bootstrap 4 How to use zIndex in react-native Bootstrap 4 align navbar items to the right Does 'position: absolute' conflict with Flexbox? Make flex items take content width, not width of parent container

Examples related to bootstrap-4

Bootstrap 4 multiselect dropdown react button onClick redirect page bootstrap 4 file input doesn't show the file name How to use Bootstrap 4 in ASP.NET Core Bootstrap 4: responsive sidebar menu to top navbar CSS class for pointer cursor Change arrow colors in Bootstraps carousel Bootstrap 4 Dropdown Menu not working? Search input with an icon Bootstrap 4 How to import popper.js?