Grupo de entrada Bootstrap5
Podemos usar.input-groupclases para agregar más estilos al campo de entrada del formulario, como iconos, texto o botones.
.input-group-textClases para establecer el estilo del texto.
Ejemplo de Bootstrap
<form>
<div class="input-group mb-3">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Your Email">
<span class="input-group-text">@example.com</span>
</div>
</form>
Pruébalo »
Tamaño del campo de entrada
Usar.input-group-smclases para establecer un campo de entrada pequeño,.input-group-lgclases para establecer un campo de entrada grande:
Ejemplo de Bootstrap
<div class="input-group mb-3 input-group-sm">
<span class="input-group-text">Small</span>
<input type="text" class="form-control">
</div>
<div class="input-group mb-3">
<span class="input-group-text">Default</span>
<input type="text" class="form-control">>
</div>
<div class="input-group mb-3 input-group-lg">
<span class="input-group-text">Large</span>
<input type="text" class="form-control">
</div>
Pruébalo »
Múltiples campos de entrada y texto
Ejemplo de Bootstrap
<!--Múltiples campos de entrada-->
<div class="input-group mb-3">
<span class="input-group-text">Person</span>
<input type="text" class="form-control" placeholder="First Name">
<input type="text" class="form-control" placeholder="Last Name">
</div>
<!--Múltiples textos informativos-->
<div class="input-group mb-3">
<span class="input-group-text">One</span>
<span class="input-group-text">Two</span>
<span class="input-group-text">Three</span>
<input type="text" class="form-control">
</div>
Pruébalo »
Casillas de verificación y botones de opción
La información de texto se puede reemplazar con casillas de verificación y botones de opción:
Ejemplo de Bootstrap
<div class="input-group mb-3">
<div class="input-group-text">
<input type="checkbox">
</div>
<input type="text" class="form-control" placeholder="EJEMPLO">
</div>
<div class="input-group mb-3">
<div class="input-group-text">
<input type="radio">
</div>
<input type="text" class="form-control" placeholder="GOOGLE">
</div>
Pruébalo »
Agregar grupo de botones al campo de entrada
Ejemplo de Bootstrap
<div class="input-group mb-3">
<button class="btn btn-outline-primary" type="button">Basic Button</button>
<input type="text" class="form-control" placeholder="Some text">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Search">
<button class="btn btn-success" type="submit">Go</button>
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Something clever..">
<button class="btn btn-primary" type="button">OK</button>
<button class="btn btn-danger" type="button">Cancel</button>
</div>
Pruébalo »
Configurar menú desplegable
Para agregar un menú desplegable al campo de entrada no es necesario usar la clase .dropdown.
Ejemplo de Bootstrap
<div class="input-group mt-3 mb-3">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Seleccionar sitio web</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="https://www.google.com">GOOGLE</a></li>
<li><a class="dropdown-item" href="https://www.example.com">EJEMPLO</a></li>
<li><a class="dropdown-item" href="https://www.taobao.com">TAOBAO</a></li>
</ul>
<input type="text" class="form-control" placeholder="Dirección del sitio web">
</div>
Pruébalo »
Etiqueta del grupo de entrada
En el grupo de entrada, la etiqueta se establece mediante el elemento label alrededor del grupo de entrada. El atributo for de la etiqueta debe corresponder al id del grupo de entrada. Al hacer clic en la etiqueta, se puede enfocar el campo de entrada:
Ejemplo de Bootstrap
<form>
<label for="demo">Ingrese su correo electrónico aquí:</label>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Email" id="demo" name="email">
<span class="input-group-text">@example.com</span>
</div>
</form>
Pruébalo »