How to put multiple Bootstrap inputs on one line?

Question

I have the following HTML:

<input type="text" class="form-control" name="watch" value="" placeholder="watch">

<div class="input-group">
    <span class="input-group-addon">$</span>
    <input type="number" class="form-control" name="price" value="" placeholder="Price (optional)" style="width: 140px;">
</div>

<span class="btn btn-primary" onclick="update($(this));"><span class="glyphicon glyphicon-upload" aria-hidden="true"></span> Update</span>

JSFIDDLE

It looks like this:

How can I get both inputs and a button on the same line? I was messing around with CSS but can't make it work. I managed to get it to work with the table, but I know that a CSS solution would be “better”.

Answer 1

You can use inline forms, as in the bootstrap documentation located here: https://getbootstrap.com/docs/3.4/css/#forms-inline

You probably need a form-inline class.

Answer 2

Option 1 - Embedded Forms :

.form-inline

2 - :

, Bootstraps

2. , col-md - *.

<div class="form-group row"> 

  <div class="col-md-8" >
   <input type="text" class="form-control" name="watch" value="" placeholder="watch">
  </div>

  <div class="col-md-2" > 
    <div class="input-group">
        <span class="input-group-addon">$</span>
        <input type="number" class="form-control" name="price" value="" placeholder="Price (optional)" style="width: 140px;">
    </div>
  </div>

  <div class="col-md-2">
    <span class="btn btn-primary" onclick="update($(this));"><span class="glyphicon glyphicon-upload" aria-hidden="true"></span> Update</span>
  </div>
</div>

Answer 3

xs, , 12 , 3 x 4.

<div class="row">
   <div class="col-xs-4">
   </div>
   <div class="col-xs-4">
   </div>
   <div class="col-xs-4">
   </div>
</div>

, :

<div class="row">
   <div class="col-xs-7">
   </div>
   <div class="col-xs-3">
   </div>
   <div class="col-xs-2">
   </div>
</div>

12.

-

Answer 4

In bootstrap 4 you use multiple

<div class="col"></div>

Answer 5

Bootstrap 4 can significantly reduce the number of elements needed to get the embedded file, simply referring to the group of forms as a row, and each input element as a column, as shown below ....

<form>
  <div class="form-group row">
    <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="[e-mail]">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

Read more about it here | https://getbootstrap.com/docs/4.0/components/forms/#readonly-plain-text