Bootstrap centering container in the middle of the page

Question

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 like my form to be centred in the middle of the page. The reason why it is complicated is because I had an issue where my viewport was too large due to the lack of content on the page itself, there was a huge white space under my footer. My way of solving this was just simply making the view height of the form itself be 85%, because of this I am not sure how to centre my form horizontally on the page. What would be the best way to solve this issue? Any help is greatly appreciated! Attached will be a screenshot and the code

code is as follows:

{% extends 'base.html' %}
{% load static %}

{% block css_files  %}
<link rel="stylesheet" href="{% static 'login-out.css' %}">
{% endblock %}

{% block content %}
<div class="container-fluid" id='loginout'>
  <div class="container-fluid text-center pt-3">
  {% if next %}
    {% if user.is_authenticated %}
      <p>Your account doesn't have access to this page. To proceed,
      please login with an account that has access.</p>
    {% else %}
      <p><strong> Please login to see this page.</strong></p>
    {% endif %}
  {% endif %}
    </div>
    
  <section id="form-test">
  <div class="container w-25 py-3" id='login-wrapper'>
    <form method="post" action="{% url 'login' %}">
        {% csrf_token %}
        <div class="form-group">
            {{ form.username.label_tag }}
            {{ form.username }}
            {{ form.password.label_tag }}
            {{ form.password }}
            {{ form.non_field_errors }}
        </div>
        <input class='btn btn-outline-primary' type="submit" value="Login" />
        <input type="hidden" name="next" value="{{ next }}" />
    </form>
    
    {# Assumes setup the password_reset view in URLconf #}
    <p><a href="{% url 'password_reset' %}">Lost password?</a></p>
  </div>
  </section>
</div>
{% endblock %}

and css

#loginout {
    background: #fef8f5;
    height: 85vh;
}

#container-text-center-pt-3 a {
    text-decoration: none !important;
}

#wrapper {
    background: #fef8f5;
    height: 100vh;
}

.form-control:focus {
    border-color: #d66534;
    box-shadow: 0 0 0 0.2rem rgb(230, 77, 11, 0.25);
} 

#login-wrapper {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

flex might help align-self-center https://getbootstrap.com/docs/4.0/utilities/flex/ — Bharat, Jul 28 '21 at 10:50
thank you for the reply, but unfortunately not haha. At least the way I just tried integrating it, it doesn't seem to help. But I could definitely be making a mistake, I feel like my issue arises from the fact that my form is taking 85% of the view height but I could be completely wrong — mharre, Jul 28 '21 at 11:02

score 3 · Accepted Answer · answered Jul 28 '21 at 11:10

3

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

answered Jul 28 '21 at 11:10

Nakarukatoshi Uzumaki

325
4
14

Ahh this is really interesting thank you, I am not sure if I am following what you're saying correctly though. I tried to set the body to but I think I may of did something wrong. If I remove my form's vh of 85% I have a gigantic white space under the footer. If I followed what you say correctly, I added min-height-100vh; and height 100% to the body shouldn't the white space under the footer disappear or no? – mharre Jul 28 '21 at 11:28
Playing with vh and vw is dangerous, because if you set it in the wrong place, the whole page could be messed up. The thing is that the maximum legal height of an element is its parent's height, so, if you have a body which occupies the whole viewport, then you have a div which ocuppies only the needed space and then you have your form, that form won't be higher than the div which occupies only the needed space. You can check the div's height using the inspector of the browser (usually, ctrl+shift+i). Good luck :D – Nakarukatoshi Uzumaki Jul 28 '21 at 11:40
Thank you for all of the useful info! I'm sure the issue is changing the forms vh, technically it is centered but when I change the vh it looks doesn't centered lol. I think I may first need to figure out why I have so much blank white space under my footer – mharre Jul 28 '21 at 11:43
as I said, if you use the inspection tools, you will find the problem really really fast, here's a link for firefox: [Examine and edit the box model](https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model). And yeah, as you said, it's all about playing with your element's heights – Nakarukatoshi Uzumaki Jul 28 '21 at 11:48
ah yes thank you for the link, I will definitely read more. Sorry I am a bit of an idiot when it comes to anything related to the front end besides basics haha. I appreciate the help! – mharre Jul 28 '21 at 11:55
nah, don't worry, everybody starts at some point, so it's common to ask! (everybody (including me) had those type of questions at the beggining!). Good luck with your learning traversy :) – Nakarukatoshi Uzumaki Jul 28 '21 at 11:58

score 3 · Answer 2 · answered Jul 28 '21 at 11:11

3

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/

answered Jul 28 '21 at 11:11

MOHD SHAHZAIB

500
2
10

Thank you for the reply! This does work, my main issue is that in the form I have it set to 85vh because without it I have a huge white space under the footer. Technically if I remove this vh then the form is centered, but without the vh it looks weird due to the white space under the footer. I think my main issue is the vh of the form itself, technically the browser thinks it's center but due to the vh of the form it isn't. I hope that makes sense! – mharre Jul 28 '21 at 11:29

Bootstrap centering container in the middle of the page

2 Answers2

Linked