Center column on page

Asked

Viewed 47 times

-2

I am creating a login/registration screen.

I’d like to keep it that way:

inserir a descrição da imagem aqui

Only in my code below it is positioned on the left. How to center, equal to the image above?

<section>
      <div class="container">
        <div class="row">

          <div class="bg-branco col-md-5 rounded">

            <form class="" method="post">
              <div class="row">
                  <div class="col-md-12">
                      <h2 class="espaco20 centro">Faça seu cadastro</h2>
                  </div>
              </div>
            </form>

          </div>


        </div>
      </div>
    </section>
css html5 twitter-bootstrap bootstrap-4

1 answer

-1


You have to wear auto margin in the container that is with the form in type <div class="bg-branco col-md-5 rounded m-auto"> where m-auto is the native Bootstrap class to place margin:auto in the element.

inserir a descrição da imagem aqui

Code of the image above

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />
  <link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<style>
  
</style>
</head>
<body>
  
  <section>
    <div class="container">
      <div class="row">

        <div class="bg-branco col-md-5 rounded m-auto">

          <form class="" method="post">
            <div class="row">
                <div class="col-md-12">
                    <h2 class="espaco20 centro">Faça seu cadastro</h2>
                </div>
            </div>
          </form>

        </div>


      </div>
    </div>
  </section>
  
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>
</html>

Browser other questions tagged css html5 twitter-bootstrap bootstrap-4

You are not signed in. Login or sign up in order to post.