How do I make an input box and a button line up in bootstrap?

Question

When using Twitter Bootstrap 2.1.0, and using HTML like this:

<div class="row">
    <div class="span10">
        <form data-bind="submit: AddDepartment">
            <input type="text" class="input-large" placeholder="Department Name" />
            <button type="submit" class="btn">Add</button>
        </form>
    </div>
</div>

The button doesn't line up with the textbox. You can see a jsFiddle of it here.

What is the proper Bootstrap way of getting them to line up?

Answer 1

You need to place form-inline class in the form element like so:

<form data-bind="submit: AddDepartment" class="form-inline">

Here is an example: http://jsfiddle.net/SufMb/