Aligning text box and button, bootstrap

Question

I've had the following issue occur with a bootstrap-styled text field and input button many times. Notice that they are not vertically aligned:

How do I align these two elements? Here is the HTML:

<div class="span6">
    <input type="text" placeholder="email"> <button type="button" class="btn btn-info">Sign up</button>
</div>

Answer 1

In order to complete that, you must use proper Twitter Bootstrap classes for forms.

In this case, that is .form-inline class.

Here is proper markup:

<form class="form-inline">
  <input type="text" class="input-small" placeholder="Email"/>
  <button type="submit" class="btn">Sign in</button>
</form>

Here is demo http://jsfiddle.net/YpXvT/42/

Answer 2

<div class="navbar-form pull-left">
  <input type="text" class="span2">
  <button class="btn">Sign up</button>
</div>

copied from http://twitter.github.io/bootstrap/components.html#navbar

or

<div class="input-append">
    <input type="text"/>
    <button class="btn">Sign up</button>
</div>

or

<div class="form-horizontal">
    <input type="text"/>
    <button class="btn">Sign up</button>
</div>