center form vertically

Question

center form vertically

Navigation

#1 by (5 votes)

5

I need to center that form (That the form is in the center of the page) and I do not know how, I leave code:

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">    
       
       <section id="cover">
      <div id="cover-caption">
          <div id="container" class="container">
              <div class="row">
                  <div class="col-sm-10 offset-sm-1 text-center">
                      <h1 class="display-3">Bienvenidos a intranet</h1>
                      <div class="info-form mt-5">
                          <form action="" class="form-inline justify-content-center">
                              <div class="form-group align-self-center">
                                  <label class="sr-only">Nombre</label>
                                  <input type="text" class="form-control" placeholder="Usuario">
                              </div>
                              <div class="form-group">
                                  <label class="sr-only">COntraseña</label>
                                  <input type="text" class="form-control" placeholder="Contraseña">
                              </div>
                              <button type="submit" class="btn btn-success ">Ingresar</button>
                          </form>
                      </div>
                      <br>
                  </div>
              </div>
          </div>
      </div>
  </section>

bootstrap

asked by Mario 26.03.2018 в 20:13

source

1 answer

Json Web Token (JWT) in Node.js with express Get the value of an entry Select

score 5 · Answer 1

You must remove the css class form-inline from the <form> tag

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">    
       
       <section id="cover">
      <div id="cover-caption">
          <div id="container" class="container">
              <div class="row">
                  <div class="col-sm-10 offset-sm-1 text-center">
                      <h1 class="display-3">Bienvenidos a intranet</h1>
                      <div class="info-form mt-5">
                          <form action="" class="justify-content-center">
                              <div class="form-group align-self-center">
                                  <label class="sr-only">Nombre</label>
                                  <input type="text" class="form-control" placeholder="Usuario">
                              </div>
                              <div class="form-group">
                                  <label class="sr-only">COntraseña</label>
                                  <input type="text" class="form-control" placeholder="Contraseña">
                              </div>
                              <button type="submit" class="btn btn-success ">Ingresar</button>
                          </form>
                      </div>
                      <br>
                  </div>
              </div>
          </div>
      </div>
  </section>