0

I am trying to vertical align the 2 rows I have inside the container-fluid, they are already aligned horizontally. The goal is to have it in the middle of the screen.

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

        <title>Mapa Gravida</title>
        <style>
            html, body {
                height: 100%;
            }
               
        </style>
    </head>
    <body>
        <div class="container-fluid h-100">
            <div class="row justify-content-center align-items-center"> 
            <p>O seu email foi enviado com sucesso, deseja criar outro mapa?</p>
            </div>
            <div class="row justify-content-center align-items-center"> 
                <button type="button" class="btn btn-dark mr-3" onclick="redirectToCardioMap()">Mapa Cardio</button>
                <button type="button" class="btn btn-dark" onclick="redirectToPregnantMap()">Mapa Gravida</button>
            </div>
        </div>
</body>
</html>

preview

João Moreira
  • 31
  • 5

1 Answers1

0

You can first add d-flex class to your parent div and align the two rows vertically and horizontally using align-items-center and justify-content-center. Then you can wrap both your rows inside a div. Try below code :

<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

        <title>Mapa Gravida</title>
        <style>
            html, body {
                height: 100%;
            }
               
        </style>
    </head>
    <body>
        <div class="d-flex container-fluid h-100 align-items-center justify-content-center">
           <div >
            <div class="row  align-items-center"> 
            <p>O seu email foi enviado com sucesso, deseja criar outro mapa?</p>
            </div>
            <div class="row justify-content-center align-items-center"> 
                <button type="button" class="btn btn-dark mr-3" onclick="redirectToCardioMap()">Mapa Cardio</button>
                <button type="button" class="btn btn-dark" onclick="redirectToPregnantMap()">Mapa Gravida</button>
            </div>
           </div>
        </div>
</body>
</html>
Anjs
  • 586
  • 4
  • 11