2

Buen día!

Les comento.. soy nuevo utilizando Bootstrap 4 y estoy intentando, dentro de un formulario, poner en un mismo renglón varios input de la clase input-group.

Estoy intentando lo siguiente:

<div class="row">
    <label for="uno">Primer Label</label>
    <div class="input-group col-4 mb-3">
        <div class="input-group-prepend">
            <span class="input-group-text" id="basic-addon34">https://example.com/users/</span>
        </div>
        <input type="text" class="form-control" id="uno" aria-describedby="basic-addon3">
    </div>


    <label for="basic-url">Segundo Label</label>
    <div class="input-group col-4 mb-3">
        <div class="input-group-prepend">
            <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
        </div>
        <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
    </div>
</div>

Lo que pasa, es que el <Label> se posiciona a la izquierda del <input> cuando lo que pretendo es que se posicione arriba, como pasa usando la clase .form-row

Intenté probando distintas combinaciones y buscando en internet y no tuve suerte!

¿Alguien sabe cual sería la manera correcta para hacerlo?

Aclaro, que no utilizo form-inline ya que es un formulario bastante largo (+30 inputs), donde en ciertos casos muestro 2 o 3 en un mismo renglón, pero se da la situación en la que tengo que aclarar la medida, por lo cual me veo obligado a utilizar un input-group

Desde ya muchísimas gracias por leer la pregunta!

EDIT

Creo que me expresé mal, lo que busco sería esto

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputEmail4">Email</label>
      <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
    </div>

Pero usando input-group en lugar de form-group para poder hacer uso de los prepend.

De nuevo gracias!

2
  • Quieres que el prepend este en la parte de arriba?
    – Legna
    Commented el 4 abr. 2018 a las 14:11
  • @Angel me refería a ponerlos en linea en un form normal, como se hace con la clase form-row, ahí edite la pregunta para que quedara más clara, Gracias! Commented el 4 abr. 2018 a las 14:20

2 respuestas 2

1

Solo es necesario agregar unos cuantos div:

 <div class="row">
  <div class="col">
    <div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1">@</span>
  </div>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
  </div>
  <div class="col">
    <div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1">@</span>
  </div>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
  </div>
</div>

Aqui te va un ejemplo: EJEMPLO

Para la parte responsive tendrías que ponerle algo más de cabeza.

1
  • Muchísimas gracias! me solucionaste la vida :P Commented el 4 abr. 2018 a las 14:32
1

Espero haber entendido tu problemática, ya casi lo tenias resuelto, era cosa de jugar con unas clases css de bootstrap.

<!doctype html>
<html lang="en">
   <head>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
      <div class="form-row">
      <div class="form-group col-md-6">
         <label for="basic-url">Primer Label</label>
         <div class="input-group mb-3">
            <div class="input-group-prepend">
               <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
            </div>
            <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
         </div>
      </div>
      <div class="form-group col-md-6">
         <label for="basic-url">Segundo Label</label>
         <div class="input-group mb-3">
            <div class="input-group-prepend">
               <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
            </div>
            <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
         </div>
      </div>
      <!-- Optional JavaScript -->
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
      </body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.