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 = "";
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>
20
Answers
you can vertically align your container by making the parent container flex and adding
align-items:center
:Updated Pen
Important! Vertical center is relative to the height of the parent
Now, onto vertical centering…
Bootstrap 5 (Updated 2021)
Bootstrap 5 is still flexbox based so vertical centering works the same way as Bootstrap 4. For example,
align-items-center
,justify-content-center
or auto margins can used on the flexbox parent (row
ord-flex
).align-items-center
on a flexbox row parent (row
ord-flex
)justify-content-center
on a flexbox column parent (d-flex flex-column
)my-auto
on a flexbox parentVertical Center in Bootstrap 5
Bootstrap 4
You can use the new flexbox & size utilities to make the
container
full-height anddisplay: 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 childhttps://codeply.com/go/fFqaDe5Oey
Option 2
align-items-center
on flexbox parent (.row
isdisplay:flex; flex-direction:row
)https://codeply.com/go/BumdFnmLuk
Option 3
justify-content-center
on flexbox parent (.card
isdisplay:flex;flex-direction:column
)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, andmy-auto
will vertically center thecol-sm-12
column.Vertical Center Using Auto Margins Demo
my-auto
represents margins on the vertical y-axis and is equivalent to:2 – Vertical Center with Flexbox:
Since Bootstrap 4
.row
is nowdisplay:flex
you can simply usealign-self-center
on any column to vertically center it…or, use
align-items-center
on the entire.row
to vertically center align allcol-*
in the row…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.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…
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 Center Vertical and Horizontal Alignment
In Bootstrap 4 (beta), use
align-middle
. Refer to Bootstrap 4 Documentation on Vertical alignment:Following bootstrap 4 classes helped me solve this
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 ah1
title.What did work was some simple css:
or
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 of100%
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)
/*You have to add height 100vh */
Center
I did it this way with Bootstrap
4.3.1
:I’ve tried all the answers herefrom, but found out here is the difference between h-100 and vh-100
Here is my solution:
use
.my-auto
(bootsrap4) css class on yor divThis line is where the magic happens
<div class="col-md-6 my-auto">
, themy-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.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.
Vertical align Using this bootstrap 4 classes:
Method1:
eg:
and if you want parent be circle:
which two custom css classes are as follow:
Final usage can be like for example:
Method2:
You can use following:
Method3:
You can use following:
also if you want content be center horisontally too:
in Bootstrap 5 we can do it easily. Below is an example to align card. We just have to set the card width, then the rest setting are using bootstrap 5 class.
Using bootstrap version 5 or later, use the code below to center the content horizontally and vertically.
For all Bootstrap versions 2, 3, 4 and 5 with only two custom classes suitable with any height and width.
bootstrap 5 and blazor web assembly: