Place form fields horizontally using Twitter Bootstrap

Question

How do we place form fields horizontally using Twitter Bootstrap

I tried below HTML code. But it shows one by one like below

• First Name - Text Box

• Last Name - Text Box

  Search

  <form class="form-horizontal">
      <div class="control-group">
        <label class="control-label" for="first">First Name</label>
        <div class="controls">
          <input type="text" id="first" placeholder="firstname">
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="lastname">Last Name</label>
        <div class="controls">
          <input type="text" id="lastname" placeholder="Last Name">
        </div>
      </div>
      <div class="control-group">
        <div class="controls">              
          <button type="submit" class="btn">Search</button>
        </div>
      </div>
    </form>
  

I want First Name and Last Name should be placed horizontally in first line and in next line Search Button.

Like this

• First Name - Text Box Last Name - Text Box

  Search

Answer 1

Add inline class to First name, Last name control-group div:

<div class="control-group inline">

CSS

.inline {
    display:inline-block;
}

Working fiddle http://jsfiddle.net/GgSRN/

Answer 2

try this

    <form class="form-group form-inline">
      <label class="control-label" for="first">First Name</label>
      <input type="text" id="first" placeholder="firstname">
      <label class="control-label" for="lastname">Last Name</label>
      <input type="text" id="lastname" placeholder="Last Name">

      <div>
        <button type="submit" class="btn">Search</button>
      </div>
    </form>

check bootstrap inline Form it will be good to go as you said.