How to vertically center a container in Bootstrap?
The Flexible box way
Vertical alignment is now very simple by the use of Flexible box layout. Nowadays, this method is supported in a wide range of web browsers except Internet Explorer 8 & 9. Therefore we'd need to use some hacks/polyfills or different approaches for IE8/9.
In the following I'll show you how to do that in only 3 lines of text (regardless of old flexbox syntax).
Note: it's better to use an additional class instead of altering .jumbotron
to achieve the vertical alignment. I'd use vertical-center
class name for instance.
Example Here (A Mirror on jsbin).
<div class="jumbotron vertical-center"> <!--
^--- Added class -->
<div class="container">
...
</div>
</div>
.vertical-center {
min-height: 100%; /* Fallback for browsers do NOT support vh unit */
min-height: 100vh; /* These two lines are counted as one :-) */
display: flex;
align-items: center;
}
Important notes (Considered in the demo):
A percentage values of
height
ormin-height
properties is relative to theheight
of the parent element, therefore you should specify theheight
of the parent explicitly.Vendor prefixed / old flexbox syntax omitted in the posted snippet due to brevity, but exist in the online example.
In some of old web browsers such as Firefox 9 (in which I've tested), the flex container -
.vertical-center
in this case - won't take the available space inside the parent, therefore we need to specify thewidth
property like:width: 100%
.Also in some of web browsers as mentioned above, the flex item -
.container
in this case - may not appear at the center horizontally. It seems the applied left/rightmargin
ofauto
doesn't have any effect on the flex item.
Therefore we need to align it bybox-pack / justify-content
.
For further details and/or vertical alignment of columns, you could refer to the topic below:
- vertical-align with Bootstrap 3
The traditional way for legacy web browsers
This is the old answer I wrote at the time I answered this question. This method has been discussed here and it's supposed to work in Internet Explorer 8 and 9 as well. I'll explain it in short:
In inline flow, an inline level element can be aligned vertically to the middle by vertical-align: middle
declaration. Spec from W3C:
middle
Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.
In cases that the parent - .vertical-center
element in this case - has an explicit height
, by any chance if we could have a child element having the exact same height
of the parent, we would be able to move the baseline of the parent to the midpoint of the full-height child and surprisingly make our desired in-flow child - the .container
- aligned to the center vertically.
Getting all together
That being said, we could create a full-height element within the .vertical-center
by ::before
or ::after
pseudo elements and also change the default display
type of it and the other child, the .container
to inline-block
.
Then use vertical-align: middle;
to align the inline elements vertically.
Here you go:
<div class="jumbotron vertical-center">
<div class="container">
...
</div>
</div>
.vertical-center {
height:100%;
width:100%;
text-align: center; /* align the inline(-block) elements horizontally */
font: 0/0 a; /* remove the gap between inline(-block) elements */
}
.vertical-center:before { /* create a full-height inline block pseudo=element */
content: " ";
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;
}
.vertical-center > .container {
max-width: 100%;
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
/* reset the font property */
font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
WORKING DEMO.
Also, to prevent unexpected issues in extra small screens, you can reset the height of the pseudo-element to auto
or 0
or change its display
type to none
if needed so:
@media (max-width: 768px) {
.vertical-center:before {
height: auto;
/* Or */
display: none;
}
}
UPDATED DEMO
And one more thing:
If there are footer
/header
sections around the container, it's better to position that elements properly (relative
, absolute
? up to you.) and add a higher z-index
value (for assurance) to keep them always on the top of the others.
Vertical Align Center in Bootstrap 4
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 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
or d-flex
).
- use
align-items-center
on a flexbox row parent (row
ord-flex
) - use
justify-content-center
on a flexbox column parent (d-flex flex-column
) - use
my-auto
on a flexbox parent
Vertical Center in Bootstrap 5
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>
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:
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 Center Vertical and Horizontal Alignment
How to center div vertically in Bootstrap 4?
If you want to vertically center those elements set the height and width of html and body to 100%. Setting width & height to 100% makes an element take on the height of it's parent.
Next, set all the child elements accordingly. In bootstrap width: 100%
is w-100
and height:100%
is h-100
. Also, bootstrap uses a 12 column layout so change your class from col-md-4
to col-md-6
Note: you could add w-100 and h-100 to html and body in your code for the same effect.
<style>
html,body{
width:100%;
margin:0;
height:100%;
}
</style>
<div class="container w-100 h-100">
<div class="row align-items-center h-100">
<div class="col-md-6">
<h1 class="alert alert-primary">Vertical</h1>
</div>
<div class="col-md-6">
<h1 class="alert alert-success">Vertical</h1>
</div>
</div>
</div>
Bootstrap Center Vertical and Horizontal Alignment
Bootstrap 5 (Updated 2021)
Bootstrap 5 is still flexbox based so vertical centering works the same way as it did in Bootstrap 4. For example, align-items-center
(flex-direction: row) and justify-content-center
(flex-direction: column) can used on the flexbox parent (row or d-flex).
Centering examples in Bootstrap 5
Vertical center (don't forget the parent must have a defined height!):
my-auto
for centering inside flex (.d-flex
) elementsmy-auto
can be used to center columns (.col-
) insiderow
align-items-center
to center columns (col-*
) insiderow
Horizontal center:
text-center
to centerdisplay:inline
elements & column contentmx-auto
for centering inside flex elementsmx-auto
can be used to center columns (.col-
) insiderow
justify-content-center
to center columns (col-*
) insiderow
Bootstrap 4.3+ (Update 2019)
There's no need for extra CSS. What's already included in Bootstrap will work. Make sure the container(s) of the form are full height. Bootstrap 4 now has a h-100
class for 100% height...
Vertical center:
<div class="container h-100">
<div class="row h-100 justify-content-center align-items-center">
<form class="col-12">
<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
</div>
</form>
</div>
</div>
https://codeply.com/go/raCutAGHre
the height of the container with the item(s) to center should be 100%
(or whatever the desired height is relative to the centered item)
Note: When using height:100%
(percentage height) on any element, the element takes in the height of it's container. In modern browsers vh units height:100vh;
can be used instead of %
to get the desired height.
Therefore, you can set html, body {height: 100%}, or use the new min-vh-100
class on container instead of h-100
.
Horizontal center:
text-center
to centerdisplay:inline
elements & column contentmx-auto
for centering inside flex elementsoffset-*
ormx-auto
can be used to center columns (.col-
)justify-content-center
to center columns (col-*
) insiderow
Vertical Align Center in Bootstrap
Bootstrap 4 full-screen centered form
Bootstrap 4 center input group
Bootstrap 4 horizontal + vertical center full screen
How to center vertically content in bootstrap 4
You can try this with .align-items-center
.
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<div class="container">
<div class="content">
<div class="row align-items-center">
<div class="col-6">
<h1 class="about-title">Wil je in contact komen met betrouwbare verhuisbedrijven?</h1>
<p class="about-para">Ontdek binnen een paar minuten welke verhuisbedrijven passen bij jouw verhuizing.
</p>
</div>
<div class="col-5 align-middle">
<div class="input-group">
<div class="form-outline">
<input id="search-focus" placeholder="Je postcode" type="search" class="form-control">
</div>
<button type="button" class="btn btn-primary">
Ontvang offertes
</button>
</div>
</div>
</div>
</div>
</div>
Center div vertically in Bootstrap 5
You can do it like this:
- Wrap everything with one
div
that has 100% screen width and height. - Use
flex-grow-1
for the seconddiv
so it takes the remaining height and center everything inside.
<!doctype html>
<html lang="en">
<head>
<!-- Bootstrap core CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="d-flex flex-column min-vh-100 min-vw-100">
<div>This div is not centered.</div>
<div class="d-flex flex-grow-1 justify-content-center align-items-center">
<div>This div is centered.</div>
</div>
</div>
</body>
</html>
Bootstrap 4 how to vertical align inside a container-fluid
You can first add d-flex class to your parent div and align the two rows vertically and horizontally using align-items-center and justify-content-center. Then you can wrap both your rows inside a div. Try below code :
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Mapa Gravida</title>
<style>
html, body {
height: 100%;
}
</style>
</head>
<body>
<div class="d-flex container-fluid h-100 align-items-center justify-content-center">
<div >
<div class="row align-items-center">
<p>O seu email foi enviado com sucesso, deseja criar outro mapa?</p>
</div>
<div class="row justify-content-center align-items-center">
<button type="button" class="btn btn-dark mr-3" onclick="redirectToCardioMap()">Mapa Cardio</button>
<button type="button" class="btn btn-dark" onclick="redirectToPregnantMap()">Mapa Gravida</button>
</div>
</div>
</div>
</body>
</html>
Related Topics
A Space Between Inline-Block List Items
Trouble With Content Security Policy
How to Force a Line Break in a Long Word in a Div
How to Get Centered Content Using Twitter Bootstrap
Disable Auto Zoom in Input "Text" Tag - Safari on Iphone
How to Make a Vertical Line in Html
How to Animate Underline from Left to Right
Drop-Down Menu That Opens Up/Upward With Pure Css
How to Remove Underline from a Link in Html
Use Font Awesome Icon as CSS Content
How to Style Even and Odd Elements
Is There a Minlength Validation Attribute in Html5
Display: Inline-Block Extra Margin
Using HTML and Local Images Within Uiwebview
How to "Disable" Zoom on a Mobile Web Page
How to Draw Vertical Text With CSS Cross-Browser