Bootstrap Centering Container In The Middle Of The Page
Solution 1:
To vertically center your container, you must set the parent to min-height 100vh and height 100%, and then you can add flex to the parent to center it. An example below:
HTML:
<div class="parent container d-flex justify-content-center align-items-center h-100">
<div class="child"> <!-- Your code goes inside this div/form --> </div>
</div>
Please note that h-100 means "height: 100%", so you should solve it using a bit of CSS:
.parent {
min-height: 100vh;
}
And, a friendly reminder, "parent" is like "body". If the body isn't 100vh, you won't be able to center it. In other words, if "body" is 100vh, its child should be 100%. If your structure is more like:
<body><div><div><div class="me"><form></form></div></div></div></body>
Your body should be "min-height: 100vh; height: 100%" and all your divs should be "height: 100%". Then, you should add the flex classes to form's parent (the one with the class "me"). Hope it helps you. I encourage you to learn the CSS box model, it'll help you understand everything. And please, avoid the "position: absolute" technique.
Here you can learn more about the box model: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model
Solution 2:
The easiest way of centering the div horizontally and vertically is.
First of all, take a container and give it 100% or 100 viewport width and height. And add the bootstrap flex utility classes. it should do the trick.
<div class="container h-100 d-flex justify-content-center align-items-center">
<!-- your form container -->
<div class="container w-25"></div>
</div>
Bootstrap's flex utility classes https://getbootstrap.com/docs/4.4/utilities/flex/
Post a Comment for "Bootstrap Centering Container In The Middle Of The Page"