CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
S Person D Person
S Person D Person

Reputation: 331

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

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;
}

Upvotes: 1

Views: 156

Answers (1)

Maxime Delgado
Maxime Delgado

Reputation: 96

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>

Upvotes: 1

Related Questions