Miscellaneous Input-Group online Boostrap 4

Navigation
2

Good morning!

I tell you .. I am new using Bootstrap 4 and I am trying, within a form, to put several input of the input-group class in the same row.

I'm trying the following: 

<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>

What happens is that the <Label> is positioned to the left of the <input> when what I intend is to be positioned above, as it happens using the class .form-row

I tried different combinations and searched the internet and I had no luck!

Does anyone know what would be the right way to do it?

Let me clarify, that I do not use form-inline since it is a fairly long form (+30 inputs), where in certain cases I show 2 or 3 in the same row, but there is a situation in which I have to clarify the measure , for which I am forced to use a input-group

Thank you very much for reading the question!

EDIT

I think I expressed myself badly, what I'm looking for would be this 

<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>

But using input-group instead of form-group to be able to use the prepend.

Thanks again!

    
asked by Juan Salvador Portugal 04.04.2018 в 15:51
source

2 answers

1

It is only necessary to add a few 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>

Here is an example: EXAMPLE

For the responsive part you should put something else in your head.

    
answered by 04.04.2018 / 16:13
source
1

I hope I understood your problem, you almost had it solved, it was a matter of playing with some bootstrap css classes. 

<!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>
    
answered by 04.04.2018 в 16:31
How to create a txt in android sdk 22 lolipop that is accessible from file explorer Problem when concatenating a variable with javascript text