Bootstrap align inputs side by side

Question

I am trying to align two inputs side by side using bootstrap. Testing of regular divs as follows works great:

<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>

But this always pushes to the second input below the first.

<div class="row">
            <div class="col-md-2 input-group">
                <span class="input-group-addon">Income $</span>
                <input type="number" id="income" class="form-control" placeholder="0">
                <span class="input-group-addon">.00</span>
            </div>
            <div class="col-md-2 col-md-offset-2 input-group">
                <span class="input-group-addon">Mortgage Payment $</span>
                <input type="number" id="mortgagepayment" class="form-control" placeholder="0">
                <span class="input-group-addon">.00</span>
            </div>
        </div>

Any clues?

Answer 1

You should use the "form-inline" Bootstrap class to achieve this:

<form class="form-inline">
<div class="form-group">
    <div class="form-group">
        <div class="input-group" style="width: 220px;">
            <span class="input-group-addon">Income $</span>
            <input type="number" id="income" class="form-control" placeholder="0">
            <span class="input-group-addon">.00</span>
        </div>
    </div>
    <div class="form-group">
        <div class="input-group" style="width: 250px;">
            <span class="input-group-addon">Mortgage Payment $</span>
            <input type="number" id="mortgagepayment" class="form-control" placeholder="0">
            <span class="input-group-addon">.00</span>
        </div>
    </div>
</div>
</form>

Take a look at it HERE

Answer 2

As in given HTML there is no <form> element.

here is the Demo using .controls-row and .control-group

<div class="container">    
  <div class="controls-row row">
    <div class="control-group col-md-6">
        <div class="input-group"> 
            <span class="input-group-addon">Income $</span>
            <input type="number" id="income" class="form-control" placeholder="0">       
            <span class="input-group-addon">.00</span>
        </div>
    </div>
    <div class="control-group col-md-6">
        <div class="input-group"> 
            <span class="input-group-addon">Mortgage Payment $</span>
            <input type="number" id="mortgagepayment" class="form-control" placeholder="0"> 
            <span class="input-group-addon">.00</span>
        </div>
    </div>
  </div>
</div>

Answer 3

I think you've asked a sort of loaded question, but I'll do my best to help.

After following the BS3.x docs online, I noticed you didn't wrap your form elements in a form-x class. That usually helps with their custom CSS for form elements. Following BS convention, you're missing an outer wrapper form-group. Lastly, because your beginning label(s) are different lengths (ie Mortgage Payment), wrapping them in a grid container .col-md-2 might not render the way you intend. Regardless, changing the column class is easy to do, so that is for you to decide. Remember that BS has media queries, so how it shows for you might be different depending on device and viewport width.

All that said, I've got this fiddle that should help you.

HTML

<div class="container">
  <div class="row">
    <form class="form-inline">
      <div class="form-group col-md-6">
        <div class="input-group">
          <span class="input-group-addon">Income $</span><input type="number" class="form-control" /><span class="input-group-addon">.00</span>
        </div>
      </div>
      <div class="form-group col-md-6">
        <div class="input-group">
          <span class="input-group-addon">Mortgage Payment $</span><input type="number" class="form-control" /><span class="input-group-addon">.00</span>
        </div>
      </div>
    </form>
  </div>

http://jsfiddle.net/5webN/