Question

Please see this fiddle, where I have a button and three input boxes and I’m using Bootstrap.

<div class='container'>
    <div class='row'>
        <form class='span10'>
            <input type='text' placeholder='Label' id='new-row-label' class='span3'>
            <input type='text' placeholder='Orders' id='new-row-orders' class='span2'>
            <input type='text' placeholder='Items' id='new-row-items' class='span2'>
            <div class='btn span2' id='add-row'>Add new item</div>
        </form>
    </div>
</div>​

Two things are wrong here:

1. The button is slightly lower than the input box.
2. The button is on the left hand side, when in my code it appears after the input boxes.

How can I have three input boxes and a button, all aligned at the same height, with the button on the right?

Answer 1

If you add pull-right class with btn like this

<div class='btn pull-right span2' id='add-row'>Add new item</div>

it’ll float the button at the right side like this example but it doesn’t seems lower to me.