0

I do not manage to vertical align my authentification card using bootstrap 4 I try many thing unsuccessfull: align-self-center my-auto

<body>
<div class="container h-100">
<div class="row justify-content-center h-100">
    <div class='col-6'>
        <div class='card'>
            <div class='card-body'>
                <h2>Connexion</h2>
                <form method="post">
                    <input type="hidden" name="csrfmiddlewaretoken" value="aGp4byFEdwsdvQviKciKwx7ULKQH6u5mhP0Dzet0NLFmnmiPSMDB28nitEODw4AN">


<div id="div_id_username" class="form-group"> <label for="id_username" class="col-form-label  requiredField">
                Nom d'utilisateur<span class="asteriskField">*</span> </label> <div class=""> <input type="text" name="username" autofocus class="textinput textInput form-control" required id="id_username"> </div> </div> <div id="div_id_password" class="form-group"> <label for="id_password" class="col-form-label  requiredField">
                Mot de passe<span class="asteriskField">*</span> </label> <div class=""> <input type="password" name="password" class="textinput textInput form-control" required id="id_password"> </div> </div>

                    <button type="submit" class="btn btn-primary">Connexion</button>
                    <a href="/registration/password_reset/" class="btn btn-link">Mot de passe oublié ?</a>
                </form>
            </div >
        </div>
    </div>
</div>
</div> 
</body>
SLATER
  • 613
  • 9
  • 31
  • unfortunetly I saw this posts and try solution proposed but nothing work ! – SLATER Nov 21 '19 at 18:34
  • @SLATER not working because the center respects to the height of the outer ``. Depending how your page looks like, if the authentication is the only thing you have for the page. You need to either search `how to center div horizontally and vertically in the page`, or give the an outer `
    ` height of your windows and apply `d-flex` to outer `
    ` and `m-auto` to your container, check my code snippet out. https://jsfiddle.net/6tnrb4e9/. The height of
    is respecting to the window height. If there are other component, you have to give a minimum height to `
    ` instead of `100vh`
     – Yunhai Nov 21 '19 at 20:12

0 Answers0