CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
CodeMaster2008
CodeMaster2008

Reputation: 921

Twitter's Bootstrap - create a form with 2 columns

Is it possible to create a two columns form with twitter bootstrap? They have some nice examples here: http://twitter.github.com/bootstrap/base-css.html But unfortunately all of them are using one column.

Upvotes: 31

Views: 79499

Answers (7)

Fernando_Jr
Fernando_Jr

Reputation: 430

Example two columns with Bootstrap3

        <div class="row">
            <label>Date</label>
            <div class="row">
                <div class="col-xs-7" style=" padding: 0px 2px 2px 1px;">
                    <input type="date" class="form-control col-xs-12">
                </div>
                <div class="col-xs-5" style="padding: 0px 1px 2px 1px;">
                    <input type="time" class="form-control col-xs-12">
                </div>
            </div>
        </div>

Upvotes: 1

Erowlin
Erowlin

Reputation: 10287

2 columns in Bootstrap 3 :

http://jsfiddle.net/52VtD/10419/

<div class="container">
    <div class="row">
        <form action="#">
            <div class="col-xs-6">
                <div class="form-group">
                    <label for="firstname">Firstname</label>
                    <input type="text" class="form-control" id="firstname" placeholder="Firstname">
                </div>
                <div class="form-group">
                    <label for="email">Email</label>
                    <input type="email" class="form-control" id="email" placeholder="[email protected]">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </div>
            <div class="col-xs-6">
                <div class="form-group">
                    <label for="lastname">Last Name</label>
                    <input type="text" class="form-control" id="lastname" placeholder="Last Name">
                </div>
                <div class="form-group">
                    <label for="password">Password</label>
                    <input type="password" class="form-control" id="password" placeholder="Password">
                </div>
            </div>
        </form>
    </div>
</div>

Upvotes: 9

fsimmons
fsimmons

Reputation: 144

<div class="row">
    <div class="span12">
        <div class="row-fluid">
            <div class="span6">
                <label>First Name</label>
                <input type="text" class="span12" placeholder="">
            </div>
            <div class="span6">
                <label>Last Name</label>
                <input type="text" class="span12" placeholder="Type something…">
            </div>
        </div>
    </div>
</div>

example: http://jsfiddle.net/JJnDg/460/

Upvotes: 10

parliament
parliament

Reputation: 22914

I use the following

  <form class="no-margin" >
      <fieldset>
          <div class="form-group no-margin">
              <div class="row-fluid">
                  <div class="form-group col-sm-6 no-margin"> Input 1 <div>
                  <div class="form-group col-sm-6 no-margin"> Input 2 <div>
              </div>
          </div>
      <fieldset>
  </form>

Upvotes: 0

Lowery Mark
Lowery Mark

Reputation: 1

I used this and it works pretty well.. Its responsive to bootstrap

 <div class="row-fluid">
   <div class="span12">
    <form action="" class="form-horizontal" name="user_account_add" id="user_account_add" method="post">
      <div class="span12">
        <div class="well clearfix">
         <fieldset>
          <div class="span5">
           <legend>Business Info</legend>
            <input type="hidden" name="action"  value="save" />
             <div class="control-group">
               <label class="control-label">Business Name:  </label>
               <div class="controls">
                <input type="text" class="input-xlarge"  name="business_name"  id="business_name">
               </div>
             </div>
             <legend>Owner Info</legend>
             <div class="control-group">
               <label class="control-label">Firstname: </label>
               <div class="controls">
                <input type="text" class="input-xlarge" name="fname" id="owners_name">
               </div>
             </div>
             <div class="control-group">
              <label class="control-label">Lastname: </label>
              <div class="controls">
               <input type="text" class="input-xlarge" name="Lname" id="owners_name">
              </div>
             </div>
         </div>
         <div class="span7">
          <legend>Business Operation Location</legend>
          <div class="control-group">
           <label class="control-label">Street Address</label>
           <div class="controls">
             <input type="text" class="input-xlarge"  name="address" id="address" >
           </div>
          </div>
          <div class="control-group">
           <label class="control-label">City</label>
           <div class="controls">
            <input type="text" class="span3"  name="city" id="city">
           </div>
          </div>
          <div class="control-group">
            <label class="control-label">State</label>
            <div class="controls">
             <input type="text" class="span3"  name="state" id="state">
            </div>
          </div>
          <div class="control-group">
           <label class="control-label">Zip</label>
           <div class="controls">
            <input type="text" class="span3"  name="zip" id="zip">
           </div>
          </div>
        </div>
        </fieldset>
                <button class="btn btn-primary">Submit</button>
                <button class="btn">Clear</button>
              </div>
             </div>
         </form>
     </div>
  </div>

Upvotes: 0

Chords
Chords

Reputation: 6860

Wrap the form tag around your span divs. This is working for me, but you might need to tweak things a bit:

<div class="row">
  <form class="form-horizontal">
    <div class="span6">
      <fieldset>
      <legend>Legend text</legend>
      <div class="control-group">
        <label class="control-label" for="input01">Text input</label>
        <div class="controls">
          <input type="text" class="input-xlarge" id="input01">
          <p class="help-block">Supporting help text</p>
        </div>
      </div>
      </fieldset>
    </div>
    <div class="span6">
      <fieldset>
        <legend>Legend text</legend>
        <div class="control-group">
          <label class="control-label" for="input01">Text input</label>
          <div class="controls">
            <input type="text" class="input-xlarge" id="input01">
            <p class="help-block">Supporting help text</p>
          </div>
        </div>
      </fieldset>
    </div>
  </form>
</div>

Upvotes: 50

lk.annamalai
lk.annamalai

Reputation: 403

<div class="row-fluid">
<form id="myForm" modelAttribute="mymodel">
    <div class="span12">
        <div class="well clearfix">
            <div class="span5">
                <legend>Text1</legend>          
                    <table width="100%" align="center">
                        <tr>
                            <td>
                                <label for="lable1">Label1 *</label>
                            </td>
                            <td>        
                                <input id="input1" class="input-xlarge"/>
                            </td>                       
                        </tr>           
                        <tr>
                            <td>
                                <label for="lable2">Label2 *</label>
                            </td>
                            <td>        
                                <input id="input2" class="input-xlarge"/>
                            </td>                       
                        </tr>
                        <tr>
                                <td colspan=2 align="center">
                                    <button class="btn btn-primary" type="submit">Submit</button>
                                    <button class="btn" type="reset" id="resetButton">Reset</button>
                                </td>
                        </tr>
                    </table>
            </div>
            <div class="span5 offset1">
                <legend>Text2</legend>                 
            </div>
        </div>
    </div>
</form>

Upvotes: 0

Related Questions