Grupo de entradas de Bootstrap 4
Bootstrap 4 Grupos de entrada
La clase .input-group es un contenedor para mejorar una entrada agregando un icono, texto o un botón al frente o detrás del campo de entrada como un “texto de ayuda”.
Usa .input-group-prepend para agregar el texto de ayuda frente a la entrada, y .input-group-append para agregarlo detrás de la entrada.
Por último, agrega la clase .input-group-text para diseñar el texto de ayuda especificado.
Ejm
<form> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">@</span> </div> <input type="text" class="form-control" placeholder="Username"> </div> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Your Email"> <div class="input-group-append"> <span class="input-group-text">@example.com</span> </div> </div> </form>
Consejo: Usamos la clase de utilidad .mb-3 para garantizar que el grupo de entrada obtenga un margen de fondo adecuado.
Tamaño del grupo de entrada
Utiliza la clase .input-group-sm para grupos de entrada pequeños y para grupos de entradas grandes:
Ejm
<form> <div class="input-group mb-3 input-group-sm"> <div class="input-group-prepend"> <span class="input-group-text">Small</span> </div> <input type="text" class="form-control"> </div> </form> <form> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">Default</span> </div> <input type="text" class="form-control"> </div> </form> <form> <div class="input-group mb-3 input-group-lg"> <div class="input-group-prepend"> <span class="input-group-text">Large</span> </div> <input type="text" class="form-control"> </div> </form>
Múltiples entradas y ayudantes
Agrega múltiples entradas o complementos.
Ejm
<!-- Multiple inputs --> <form> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">Person</span> </div> <input type="text" class="form-control" placeholder="First Name"> <input type="text" class="form-control" placeholder="Last Name"> </div> </form> <!-- Multiple addons / help text --> <form> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">One</span> <span class="input-group-text">Two</span> <span class="input-group-text">Three</span> </div> <input type="text" class="form-control"> </div> </form>
Grupo de entrada con casillas de verificación y radios
También puedes usar casillas de verificación o botones de radio en lugar de texto:
Ejm
<div class="input-group mb-3"> <div class="input-group-prepend"> <div class="input-group-text"> <input type="checkbox"> </div> </div> <input type="text" class="form-control" placeholder="Some text"> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <div class="input-group-text"> <input type="radio"> </div> </div> <input type="text" class="form-control" placeholder="Some text"> </div>
Botones de grupo de entradas
Ejm
<div class="input-group mb-3"> <div class="input-group-prepend"> <button class="btn btn-outline-primary" type="button">Basic Button</button> </div> <input type="text" class="form-control" placeholder="Some text"> </div> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Search"> <div class="input-group-append"> <button class="btn btn-success" type="submit">Go</button> </div> </div> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Something clever.."> <div class="input-group-append"> <button class="btn btn-primary" type="button">OK</button> <button class="btn btn-danger" type="button">Cancel</button> </div> </div>
Grupo de entrada con botón desplegable
agrega un botón desplegable en el grupo de entrada. Ten en cuenta que no necesitas el contenedor .dropdown, como lo harías normalmente.
Ejm
<div class="input-group mt-3 mb-3"> <div class="input-group-prepend"> <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown"> Dropdown button </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> </div> </div> <input type="text" class="form-control" placeholder="Username"> </div>
Etiquetas de grupo de entrada
Coloca etiquetas fuera del grupo de entrada y recuerda que el valor del atributo for debe coincidir con el id de la entrada.
Haga clic en la etiqueta y se enfocará en la entrada:
Ejm
<label for="demo">Write your email here:</label> <div class="input-group mb-3"> <input type="text" class="form-control" placeholder="Email" id="demo" name="email"> <div class="input-group-append"> <span class="input-group-text">@example.com</span> </div> </div>