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...
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_
});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_
}<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>This question is related to
html
css
twitter-bootstrap
flexbox
bootstrap-4
The answer is
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>
<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.
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
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>
<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>
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 >
<!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>
use .my-auto (bootsrap4) css class on yor div
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>
.jumbotron {
position: relative;
top: 50%;
transform: translateY(-50%);
}
you can vertically align your container by making the parent container flex and adding align-items:center:
body {
display:flex;
align-items:center;
}
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-topas needed.
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>
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>
Source: Stackoverflow.com