Skip to main content
Intenté aclarar un poco más cual es el problema
Origen Enlace

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!

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!

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!

Origen Enlace

Varios Input-Group en linea Boostrap 4

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!