es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Cómo hacer un formulario de inicio de sesión responsivo utilizando el sistema de rejilla Bootstrap?

Cómo hacer un formulario de inicio de sesión responsivo utilizando el sistema de rejilla Bootstrap?

20 Jul, 2023 Programación
mi leyenda



Código: – http://jsfiddle.net/Dhanunjay/6r3wos04/10/

¿Puede corregir el código anterior? En la actualidad ocupa toda la pantalla. Quiero que esté en el centro de la pantalla y con espacio en los 4 lados.

Incluso en las clases de CSS, eliminé algunos estilos como padding, width, margin… pero aún así tengo el mismo problema.

Usando col-sm…lg…xs… Quiero hacerlo responsive. ¿Alguna idea o sugerencia, por favor?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para hacer que el código se muestre en el centro de la pantalla con espacio en los cuatro lados, puedes agregar lo siguiente al CSS:

    .container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

    Y envuelve el fieldset en un div con la clase “container”:

    <div class="container">
  <fieldset class="scheduler-border">
    <legend class="scheduler-border">mi leyenda</legend>
    <form>
      <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Ingrese correo electrónico">
      <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Ingrese correo electrónico">
      <button type="submit" class="btn btn-primary">Enviar</button>
    </form>
  </fieldset>
</div>

    Para hacerlo más receptivo, puedes agregar clases de Bootstrap al div:

    <div class="container d-flex justify-content-center align-items-center vh-100">
  <div class="col-sm-8 col-md-6 col-lg-4">
    <fieldset class="scheduler-border">
      <legend class="scheduler-border">mi leyenda</legend>
      <form>
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Ingrese correo electrónico">
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Ingrese correo electrónico">
        <button type="submit" class="btn btn-primary">Enviar</button>
      </form>
    </fieldset>
  </div>
</div>

    Esto hará que el div se comporte como un contenedor flex y centre sus elementos horizontal y verticalmente. La clase “vh-100” hará que el div ocupe la altura completa de la pantalla. Las clases “col-sm-8 col-md-6 col-lg-4” harán que el div ocupe 8 columnas en pantallas pequeñas, 6 columnas en pantallas medianas y 4 columnas en pantallas grandes. Puedes ajustar estos valores a tu gusto.

Comments are closed.