How to fit inline elements in a row with Bootstrap?

Question

I'm using Bootstrap 3 to design my website and I would like to fit a text input and 3 buttons horizontally in a div. Here is my markup:

<div style="width: 400px">
  <input class="form-control" type="text">
  <a class="btn" href="#">Button 1</a>
  <a class="btn" href="#">Button 2</a>
  <a class="btn" href="#">Button 3</a>
</div>

But the text input spans to the whole div's width and the buttons get pushed underneath it.

I've tried setting the text input's display mode to inline and inline-block but it didn't change anything.

Answer 1

Try this DEMO

<div class="form-inline">
    <div class="form-group">
        <input class="form-control" type="text">
    </div>
    <a class="btn btn-default" href="#">Button 1</a>
    <a class="btn btn-default" href="#">Button 2</a>
    <a class="btn btn-default" href="#">Button 3</a>
</div>