¿Cómo colocar dos cuadros de entrada uno al lado del otro usando Bootstrap 4?

En este artículo, aprenderemos cómo tomar dos entradas en una sola línea en HTML. HTML admite varios tipos de entradas como texto, contraseña, fecha y hora, fecha, hora, semana, número, correo electrónico y mucho más. Hay varias condiciones en las que tenemos que tomar múltiples entradas en una sola línea o una al lado de la otra y esto se puede lograr mediante .input-group y elemento en línea. El elemento en línea no ocupa toda la línea, sino que ocupa tanto ancho como sea necesario.

Ejemplo 1: Tomando entrada en dos campos consecutivos. 

html

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity=
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
        crossorigin="anonymous">
</head>
  
<body>
    <div class="input-group">
  
        <!-- declaration for first field -->
        <input type="text" class="form-control 
                input-sm" value="input 1 " />
  
        <!-- reducong the gap between them to zero -->
        <span class="input-group-btn" 
            style="width:0px;"></span>
  
        <!-- declaration for second field -->
        <input type="text" class="form-control 
                input-sm" value="input 2" />
    </div>
</body>
  
</html>

Producción:

Ejemplo 2: Tomando la entrada como dos campos en una línea. 

html

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" 
        href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity=
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" 
        crossorigin="anonymous">
</head>
  
<body>
    <form class="form-inline" action="/action_page.php">
      <label for="email">Email:</label>
      <input type="email" id="email" 
            placeholder="Enter email" name="email">
  
      <label for="pwd">Password:</label>
      <input type="password" id="pwd" 
            placeholder="Enter password" name="pswd">
  
    </form>
</body>
  
</html>

Producción:

Ejemplo 3: Tomando entrada en una línea con etiquetas mixtas.

html

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" 
        href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity=
"sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" 
        crossorigin="anonymous">
</head>
  
<body>
    <div class="input-group">
        <span class="input-group-text">Between</span>
        <input type="text" class="form-control" 
            placeholder="Type something..." />
        <span class="input-group-text" 
            style="border-left: 0; border-right: 0;">
            and
        </span>
        <input type="text" class="form-control"     
            placeholder="Type something..." />
    </div>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por rajatrathi y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *