Geek asks and answers

Place form fields horizontally using Twitter Bootstrap

How to place form fields horizontally using Twitter Bootstrap

I tried under the HTML code. But it shows one by one as below

  • Name - text field

  • 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 the first and last name to be placed horizontally in the first line and in the next search line.

Like this

  • First Name - Text Field Last Name - Text Field

    Search

+5
source share
3 answers

Add a inlineclass to First Name, Last Name control-groupdiv:

<div class="control-group inline">

CSS

.inline {
    display:inline-block;
}

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

+8
source

try it

    <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>

  , .

+7

Use CSS in a separate file to create your HTML code. I personally wrapped them in <div class="row">using Bootstrap and used one of them for every line you want to create.

0
source

More articles:


All Articles