Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 710
CodeMaster2008 Avatar asked May 04 '12 08:05

CodeMaster2008


People also ask

How do I split a form into two columns in bootstrap?

You can add columns and rows by adding <div class="row"> and <div class="col"> to your form. In the example above, the email and password fields are separated into two columns within a row. This is why they are displayed side by side on a webpage.

How do I make 8 columns in bootstrap?

The simple method to get 8 equal columns is to use the auto-layout columns... Show activity on this post. As BenM said above, Bootstrap uses a 12 column grid system, which won't divide cleanly into 8 equal columns. If you absolutely require 8 columns, it might be worth checking out this, or even rolling your own.


1 Answers

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> 
like image 183
Chords Avatar answered Sep 18 '22 13:09

Chords