Bootstrap permite cambiar el tamaño de los controles de formulario usando clases .form-control . Para el tamaño predeterminado se usa .form-control , para un tamaño más pequeño podemos usar la clase .form-control junto con .form-control-sm y para un tamaño más grande podemos usar la clase .form-control junto con .form-control-lg .
Sintaxis:
- Para el tamaño predeterminado:
class="form-control"
- Para tamaño pequeño:
class="form-control form-control-sm"
- Para tamaño grande:
class="form-control form-control-lg"
Acercarse:
- Incluya Bootstrap y jQuery CDN en la etiqueta <head> antes que todas las demás hojas de estilo para cargar nuestro CSS.
<enlace rel=”hoja de estilo” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ ajax/libs/jquery/3.5.1/jquery.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/ popper.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js”></script>
- Agregue la clase .form-control para el tamaño predeterminado, .form-control-sm para el control de formulario de tamaño pequeño y .form-control-lg para el control de formulario de gran tamaño en la clase de etiqueta <input>
<input class=”form-control form-control-lg” type=”text” placeholder=”.form-control-lg” aria-label=”.form-control-lg example”> <input class=”
form- control” type=”text” placeholder=”Entrada predeterminada” aria-label=”ejemplo de entrada predeterminada”>
<input class=”form-control form-control-sm” type=”text” placeholder=”.form-control- sm” aria-label=”.form-control-sm ejemplo”>
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <title>Bootstrap Form Control Size Example</title> <!--Include Latest Bootstrap, jQuery and CSS CDN --> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"> </script> </head> <body style="padding:100px;"> <!-- Add class .form-control-lg after .form-control to display large size form control--> <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example"> <br> <!-- Add class .form-control to display default size form control--> <input class="form-control" type="text" placeholder="Default input" aria-label="default input example"> <br> <!-- Add class .form-control-sm after .form-control to display small form control--> <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example"> </body> </html>
Producción:
