working not example bootstrap html css twitter-bootstrap bootstrap-4 twitter-bootstrap-4

html - not - tooltip bootstrap 4 example



Alinear el formulario al centro en Bootstrap 4 (3)

Estoy intentando alinear la forma con el centro y mantenerla receptiva. He intentado varias maneras pero sin éxito. Estoy tratando de centrar todo el texto y la forma. Estoy usando Bootstrap v4. No estoy seguro de si eso ayuda.

HTML:

<section id="cover"> <div id="cover-caption"> <div id="container"> <div class="col-sm-10 col-sm offset-1"> <h1 class="display-3">Welcome to Bootstrap 4</h1> <div class="info-form"> <form action="" class="form-inline"> <div class="form-group"> <label class="sr-only">Name</label> <input type="text" class="form-control" placeholder="Jane Doe"> </div> <div class="form-group"> <label class="sr-only">Email</label> <input type="text" class="form-control" placeholder="[email protected]"> </div> <button type="submit" class="btn btn-success ">okay, go!</button> </form> </div> <br> <a href="#nav-main" class="btn btn-secondary-outline btn-sm" role="button">&darr;</a> </div> </div> </div> </section>

CSS:

html, body{ height: 100%; } #cover { background: #222 url(''../img/stars.jpg'') center center no-repeat; background-size: cover; color: white; height: 100%; text-align: center; display: flex; align-items: center;

}

#cover-caption { width: 100%;

}


Necesitas utilizar los diferentes métodos de centrado de Bootstrap 4 ...

  • Utilice text-center de text-center para los elementos en línea.
  • Utilice justify justify-content-center para los elementos de flexbox (es decir, form-inline )

https://www.codeply.com/go/Am5LvvjTxC

Además, para compensar la columna, col-sm-* debe estar contenido dentro de una .row y la .row debe estar en un contenedor ...

<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">Welcome to Bootstrap 4</h1> <div class="info-form"> <form action="" class="form-inline justify-content-center"> <div class="form-group"> <label class="sr-only">Name</label> <input type="text" class="form-control" placeholder="Jane Doe"> </div> <div class="form-group"> <label class="sr-only">Email</label> <input type="text" class="form-control" placeholder="[email protected]"> </div> <button type="submit" class="btn btn-success ">okay, go!</button> </form> </div> <br> <a href="#nav-main" class="btn btn-secondary-outline btn-sm" role="button">↓</a> </div> </div> </div> </div> </section>


Todas las respuestas anteriores dan perfectamente la solución para centrar el formulario utilizando Bootstrap 4 . Sin embargo, si alguien quiere usar fuera de la caja las clases de css de Bootstrap 4 sin la ayuda de estilos adicionales y tampoco quiere usar flex , podemos hacerlo de esta manera.

Un formulario de muestra

HTML

<div class="container-fluid h-100 bg-light text-dark"> <div class="row justify-content-center align-items-center"> <h1>Form</h1> </div> <hr/> <div class="row justify-content-center align-items-center h-100"> <div class="col col-sm-6 col-md-6 col-lg-4 col-xl-3"> <form action=""> <div class="form-group"> <select class="form-control"> <option>Option 1</option> <option>Option 2</option> </select> </div> <div class="form-group"> <input type="text" class="form-control" /> </div> <div class="form-group text-center"> <div class="form-check-inline"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="optradio">Option 1 </label> </div> <div class="form-check-inline"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="optradio">Option 2 </label> </div> <div class="form-check-inline"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="optradio" disabled>Option 3 </label> </div> </div> <div class="form-group"> <div class="container"> <div class="row"> <div class="col"><button class="col-6 btn btn-secondary btn-sm float-left">Reset</button></div> <div class="col"><button class="col-6 btn btn-primary btn-sm float-right">Submit</button></div> </div> </div> </div> </form> </div> </div> </div>

Enlace a CodePen

https://codepen.io/anjanasilva/pen/WgLaGZ

Espero que esto ayude a alguien. Gracias.


<div class="d-flex justify-content-center align-items-center container "> <div class="row "> <form action=""> <div class="form-group"> <label for="inputUserName" class="control-label">Enter UserName</label> <input type="email" class="form-control" id="inputUserName" aria-labelledby="emailnotification"> <small id="emailnotification" class="form-text text-muted">Enter Valid Email Id</small> </div> <div class="form-group"> <label for="inputPassword" class="control-label">Enter Password</label> <input type="password" class="form-control" id="inputPassword" aria-labelledby="passwordnotification"> </div> </form> </div> </div>