Skip to content Skip to sidebar Skip to footer

Bootstrap Centering Container In The Middle Of The Page

I am brand new to front end and am practising by building a fake e-commerce website. I've had a few issues but ran into one where I am not sure the best way to solve them. I would

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:

<divclass="parent container d-flex justify-content-center align-items-center h-100"><divclass="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><divclass="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.

<divclass="container h-100 d-flex justify-content-center align-items-center"><!-- your form container --><divclass="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"