I'm looking for a way to vertically center the container
div inside the jumbotron
and to set it in the middle of the page.
The .jumbotron
has to be adapted to the full height and width of the screen. The .container
div has a width of 1025px
and should be in the middle of the page (vertically center).
I want this page to have the jumbotron adapted to the height and width of the screen along with the container vertically center to the jumbotron. How can I achieve it?
.jumbotron {_x000D_
height:100%;_x000D_
width:100%;_x000D_
}_x000D_
.container {_x000D_
width:1025px;_x000D_
}_x000D_
.jumbotron .container {_x000D_
max-width: 100%;_x000D_
}
_x000D_
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>_x000D_
<div class="jumbotron">_x000D_
<div class="container text-center">_x000D_
<h1>The easiest and powerful way</h1>_x000D_
<div class="row">_x000D_
<div class="col-md-7">_x000D_
<div class="top-bg"></div>_x000D_
</div>_x000D_
_x000D_
<div class="col-md-5 iPhone-features" style="margin-left:-25px;">_x000D_
<ul class="top-features">_x000D_
<li>_x000D_
<span><i class="fa fa-random simple_bg top-features-bg"></i></span>_x000D_
<p><strong>Redirect</strong><br>Visitors where they converts more.</p>_x000D_
</li>_x000D_
<li>_x000D_
<span><i class="fa fa-cogs simple_bg top-features-bg"></i></span>_x000D_
<p><strong>Track</strong><br>Views, Clicks and Conversions.</p>_x000D_
</li>_x000D_
<li>_x000D_
<span><i class="fa fa-check simple_bg top-features-bg"></i></span>_x000D_
<p><strong>Check</strong><br>Constantly the status of your links.</p>_x000D_
</li>_x000D_
<li>_x000D_
<span><i class="fa fa-users simple_bg top-features-bg"></i></span>_x000D_
<p><strong>Collaborate</strong><br>With Customers, Partners and Co-Workers.</p>_x000D_
</li>_x000D_
<a href="pricing-and-signup.html" class="btn-primary btn h2 lightBlue get-Started-btn">GET STARTED</a>_x000D_
<h6 class="get-Started-sub-btn">FREE VERSION AVAILABLE!</h6>_x000D_
</ul>_x000D_
</div>_x000D_
</div>_x000D_
</div>_x000D_
</div>
_x000D_
This question is related to
html
css
twitter-bootstrap
twitter-bootstrap-3
vertical-alignment
Tested in IE, Firefox, and Chrome.
.parent-container {_x000D_
position: relative;_x000D_
height:100%;_x000D_
width: 100%;_x000D_
}_x000D_
_x000D_
.child-container {_x000D_
position: absolute;_x000D_
top: 50%;_x000D_
left: 50%;_x000D_
transform: translate(-50%, -50%);_x000D_
}
_x000D_
<div class="parent-container">_x000D_
<div class="child-container">_x000D_
<h2>Header Text</h2>_x000D_
<span>Some Text</span>_x000D_
</div>_x000D_
</div>
_x000D_
Found on https://css-tricks.com/centering-css-complete-guide/
Add this class: d-flex align-items-center
to the element
If you had this:
<div class="col-3">
change it to this:
<div class="col-3 d-flex align-items-center>
Bootstrap 4 includes flexbox, so the method of vertical centering is much easier and doesn't require extra CSS.
Just use the d-flex
and align-items-center
utility classes..
<div class="jumbotron d-flex align-items-center">
<div class="container">
content
</div>
</div>
http://www.codeply.com/go/ui6ABmMTLv
Important: Vertical centering is relative to height. The parent container of the items you're attempting to center must have a defined height. If you want the height of the page use vh-100
or min-vh-100
on the parent! For example:
<div class="jumbotron d-flex align-items-center min-vh-100">
<div class="container text-center">
I am centered vertically
</div>
</div>
for bootstrap4 vertical center of few items
d-flex for flex rules
flex-column for vertical direction on items
justify-content-center for centering
style='height: 300px;' must have for set points where center be calc or use h-100 class
then for horizontal center div d-flex justify-content-center and some container
so we have hierarhy of 3 tag: div-column -> div-row -> div-container
<div class="d-flex flex-column justify-content-center bg-secondary"
style="height: 300px;">
<div class="d-flex justify-content-center">
<div class=bg-primary>Flex item</div>
</div>
<div class="d-flex justify-content-center">
<div class=bg-primary>Flex item</div>
</div>
</div>
Give the container class
.container{
height: 100vh;
width: 100vw;
display: flex;
}
Give the div that's inside the container:
align-content: center;
All the content inside this div will show up in the middle of the page.
add Bootstrap.css then add this to your css
_x000D_
html, body{height:100%; margin:0;padding:0}_x000D_
_x000D_
.container-fluid{_x000D_
height:100%;_x000D_
display:table;_x000D_
width: 100%;_x000D_
padding: 0;_x000D_
}_x000D_
_x000D_
.row-fluid {height: 100%; display:table-cell; vertical-align: middle;}_x000D_
_x000D_
_x000D_
_x000D_
.centering {_x000D_
float:none;_x000D_
margin:0 auto;_x000D_
}
_x000D_
Now call in your page _x000D_
_x000D_
<div class="container-fluid">_x000D_
<div class="row-fluid">_x000D_
<div class="centering text-center">_x000D_
Am in the Center Now :-)_x000D_
</div>_x000D_
</div>_x000D_
</div>
_x000D_
If you're using Bootstrap 4, you just have to add 2 divs:
.jumbotron{_x000D_
height:100%;_x000D_
width:100%;_x000D_
}
_x000D_
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> _x000D_
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>_x000D_
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>_x000D_
_x000D_
<body>_x000D_
<div class="jumbotron">_x000D_
<div class="d-table w-100 h-100">_x000D_
<div class="d-table-cell w-100 h-100 align-middle">_x000D_
<h5>_x000D_
your stuff..._x000D_
</h5>_x000D_
<div class="container">_x000D_
<div class="row">_x000D_
<div class="col-12">_x000D_
<p>_x000D_
More stuff..._x000D_
</p>_x000D_
</div>_x000D_
</div>_x000D_
</div>_x000D_
</div>_x000D_
</div>_x000D_
</div>_x000D_
</body>
_x000D_
The classes: d-table, d-table-cell, w-100, h-100 and align-middle will do the job
In Bootstrap 4:
to center the child horizontally, use bootstrap-4 class:
justify-content-center
to center the child vertically, use bootstrap-4 class:
align-items-center
but remember don't forget to use d-flex class with these it's a bootstrap-4 utility class, like so
<div class="d-flex justify-content-center align-items-center" style="height:100px;">
<span class="bg-primary">MIDDLE</span>
</div>
Note: make sure to add bootstrap-4 utilities if this code does not work
I know it's not the direct answer to this question but it may help someone
My prefered technique :
body {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.jumbotron {
display: table-cell;
vertical-align: middle;
}
body {_x000D_
display: table;_x000D_
position: absolute;_x000D_
height: 100%;_x000D_
width: 100%;_x000D_
}_x000D_
_x000D_
.jumbotron {_x000D_
display: table-cell;_x000D_
vertical-align: middle;_x000D_
}
_x000D_
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">_x000D_
<div class="jumbotron vertical-center">_x000D_
<div class="container text-center">_x000D_
<h1>The easiest and powerful way</h1>_x000D_
<div class="row">_x000D_
<div class="col-md-7">_x000D_
<div class="top-bg">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>_x000D_
</div>_x000D_
_x000D_
<div class="col-md-5 iPhone-features">_x000D_
<ul class="top-features">_x000D_
<li>_x000D_
<span><i class="fa fa-random simple_bg top-features-bg"></i></span>_x000D_
<p><strong>Redirect</strong><br>Visitors where they converts more.</p>_x000D_
</li>_x000D_
<li>_x000D_
<span><i class="fa fa-cogs simple_bg top-features-bg"></i></span>_x000D_
<p><strong>Track</strong><br>Views, Clicks and Conversions.</p>_x000D_
</li>_x000D_
<li>_x000D_
<span><i class="fa fa-check simple_bg top-features-bg"></i></span>_x000D_
<p><strong>Check</strong><br>Constantly the status of your links.</p>_x000D_
</li>_x000D_
<li>_x000D_
<span><i class="fa fa-users simple_bg top-features-bg"></i></span>_x000D_
<p><strong>Collaborate</strong><br>With Customers, Partners and Co-Workers.</p>_x000D_
</li>_x000D_
<a href="pricing-and-signup.html" class="btn-primary btn h2 lightBlue get-Started-btn">GET STARTED</a>_x000D_
<h6 class="get-Started-sub-btn">FREE VERSION AVAILABLE!</h6>_x000D_
</ul>_x000D_
</div>_x000D_
</div>_x000D_
</div>_x000D_
</div>
_x000D_
See also this Fiddle!
Source: Stackoverflow.com