I'm unable to sucsessfully use "row vertical-align". Bootstrap/HTML

Question

I'm creating a login page (Python/Flask) and the login form will be the only element displayed on that page. I want that form to be centered both horizontally and vertically. I managed to center it horizontally, but I can't figure out vertical alignment.

I found this helpful answer -> vertical-align with Bootstrap 3, but my brain just can't comprehend it.

I'm also unsure if I'm referencing the main.css file correctly and completely not sure how to reference the contaier within main.css to align in vertically.

My file structure:

________________________________
|Flask -
|      |_flask_app.py
|      |_static_
|               |_css_
|                     |_main.css
|               |_images_
|                        |...
|      |_templates_
|                  |_index.html
|                  |_login.html
________________________________

Here's my HTML:

<!DOCTYPE html>
<html lang="en">

    <head>
        <title>LoginPage</title>
        <meta charset="utf-8">

        <!-- For rendering and touch zooming -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">

        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

        <!-- Latest compiled JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    </head>

    <body>
        <div class="container">
            <div class="row vertivcal-align">
                <div class="col-xs-12"></div>
                    <div class="span12 text-center">
                        <h1>Please login</h1>
                        <br>
                        <form action="" method="post">
                            <input type="text" placeholder="Username" name="username" value="{{
                            request.form.username }}">
                            <input type="password" placeholder="Password" name="password" value="{{
                            request.form.password }}">
                            <input class="btn btn-default" type="submit" value="Login">
                        </form>
                        {% if error %}
                            <p class="error"><strong>Error:</strong> {{ error }}
                        {% endif %}
                    </div>
                </div>    
            </div>
        </div>
    </body>
</html>

And here is my main.css

.container {
    width: 1200px;
    margin: 0 auto;
  }

.vertical-align {
    display: flex;
    align-items: center;
}

Maxime Delgado · Accepted Answer · 2020-04-06T21:59:55.163

1

You can use the following CSS and add the class m-auto to your div span12

.vertical-align {
    height:100vh
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

    <div class="container">
        <div class="row vertical-align">
            <div class="col-xs-12"></div>
                <div class="span12 text-center m-auto">
                    <h1>Please login</h1>
                    <br>
                    <form action="" method="post">
                        <input type="text" placeholder="Username" name="username" value="">
                        <input type="password" placeholder="Password" name="password" value="">
                        <input class="btn btn-default" type="submit" value="Login">
                    </form>
                </div>
            </div>    
        </div>

edited Apr 06 '20 at 21:59

answered Apr 06 '20 at 21:52

Maxime Delgado

96
10

Delago Thank you for the answer. I added m-auto and changed my main.css to contain height:100vh, unfortunatelly the login form is still at the top of the page rather than in the center. https://imgur.com/5V4HHY3 – S Person D Person Apr 06 '20 at 22:06
when you inspect, you can see your row with vertical-align is taking 100% (100vh) of the height ? (make sure the css is actually working) – Maxime Delgado Apr 06 '20 at 22:08
Hope my answer and code snippet helped you to solve your issue ! If yes, do you mind validating my answer and upvode ? :) Happy coding ! – Maxime Delgado Apr 07 '20 at 08:51
Thank you for the answer again, sorry it was already late where I live. When I inspect i can't see where the vertical-align height is so I can't tell if it's taking 100%. Here's the row vertical allign:https://imgur.com/1Cej9th and here the container itself: https://imgur.com/sfVyUUn I think I just skipped the basic knowledge and went in the deep water, therefore I have no idea what I'm doing. I'm going to revisit the basics. – S Person D Person Apr 07 '20 at 09:12
1

no worry :) your CSS is not active, maybe you didn't call it the right way. You can do this way so it will work anyway : Instead of `
`, use `
`
– Maxime Delgado Apr 07 '20 at 09:26

I'm unable to sucsessfully use "row vertical-align". Bootstrap/HTML

1 Answers1