How to put multiple Bootstrap inputs on same 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 renders like this:

How can I get both inputs and the button on the same line? I've been messing with the CSS but can't seem to get it to work. I was able to get it working with a table, but I know a CSS solution would be "better."

Answer 1

Solution 1 - Using the Grid

Use the Bootstrap’s predefined grid classes for arranging the form elements.

The grid gives you a better control over the width of the elements and scales better than the Inline Form solution.

<form>
<div class="form-row"> 

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

   <div class="form-group col-md-3">
   <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">$</div>
        </div>
        <input type="text" class="form-control" id="price0" placeholder="Price (optional)">
   </div>  
  </div>

  <div class="form-group col-md-2">
    <button type="submit" class="btn btn-primary" onclick="update($(this));"><i class="fa fa-arrow-circle-o-up" aria-hidden="true"></i> Update</button>
  </div>

</div>
</form>

Solution 2: Inline Form:

Use an Inline Form, as described by Bootstrap Inline Form Documentation. You need to manually address the width and alignment.

<form class="form-inline">
  <div class="form-group">
    <input type="text" class="form-control" name="watch" value="" placeholder="watch">
  </div>

  <div class="input-group m-2">
     <div class="input-group-prepend">
          <div class="input-group-text">$</div>
     </div>
     <input type="text" class="form-control" id="price" placeholder="Price (optional)">
  </div>  

  <button type="submit" class="btn btn-primary m-2" onclick="update($(this));"><i class="fa fa-arrow-circle-o-up" aria-hidden="true"></i> Update</button>
</form>

Running Example

This JSFiddle shows both solutions running.

The sample code and fiddle are updated for Bootstrap 4.