Inline text field using Twitter Bootstrap 3.0

Question

I am trying to make an inline text field within a horizontal form, basically I want to split the form in to two sections ( left and right) , in the left hand I will have like horizontal text fields and some inline as well and on the right hand side I want to have some inline and some are not.

How could I establish something like that , maybe this drawing could help JSFiddle Here : http://jsfiddle.net/XQx6v/

Here is my code which is not working ( I want to make it 900 px centered and also responsive to drop to the other line if its small):

  <form class="form-horizontal" action="" method="POST">
   <!-- first Row -->
          <div style="margin:auto; width:900px;" class="row">
             <div class="col-xs-6">
                  <div class="row">
                      <div class="form-group">
                        <label class="control-label">First Name</label>
                        <input type="text" value="test" name="first_name" class="form-control beta">
                        <label class="control-label">Last Name</label>
                        <input type="text" value="test" name="last_name" class="form-control beta">            </div>
                 </div>
             </div>
            <!-- Next Column -->
            <div class="col-xs-6">
               <div class="row">
               <p> testhghghjg </p>
            </div>  
       </div>
     </div>
  </form>

Thanks

Post a jsfiddle with what you have so people may edit it. - I believe that you used <div class="col-xs-6"> incorrectly — Jordan.J.D
– Jordan.J.D, Commented May 20, 2014 at 21:05
Go to jsfiddle.net > set up your project there > save it > and post the link here in your question — Jordan.J.D
– Jordan.J.D, Commented May 20, 2014 at 21:09
I think getbootstrap.com/css/#forms-inline is exactly what you want. — pennstatephil
– pennstatephil, Commented May 20, 2014 at 21:46

Shawn Taylor · Accepted Answer · 2014-05-20 23:06:35Z

I think you don't actually want what Bootstrap refers to as an inline form, but a form with inline elements... Try this Bootply

<div class="container" style="max-width:900px">

  <div class="row">
    <div class="col-md-3">
      <form role="form">
       <div class="form-group">
         <label>Name 1</label>
         <input type="email" class="form-control" placeholder="Enater Name">
       </div>
      </form>
    </div>

    <div class="col-md-3">
      <form role="form">
       <div class="form-group">
         <label>Name 2</label>
         <input type="email" class="form-control" placeholder="Enater Name">
       </div>
      </form>
    </div>

    <div class="col-md-3">
      <form role="form">
       <div class="form-group">
         <label>Name 3</label>
         <input type="email" class="form-control" placeholder="Enater Name">
       </div>
      </form>
    </div>

    <div class="col-md-3">
      <form role="form">
       <div class="form-group">
         <label>Name 4</label>
         <input type="email" class="form-control" placeholder="Enater Name">
       </div>
      </form>
    </div>
  </div></div>

Collectives™ on Stack Overflow

Inline text field using Twitter Bootstrap 3.0

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related