Databases
StackOverflow2013
Postsdbo
POdividing form into two columns with twitter bootstrap
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POdividing form into two columns with twitter bootstrap
    text
    copied!<p>What is the correct way to style form with bootstrap in the following scenario:</p> <p><img src="https://i.stack.imgur.com/fA5rQ.png" alt="enter image description here"></p> <p>1) I need to use fieldset (that will be styled later)</p> <p>2) I need to divide form into two columns</p> <p>3) Each column has label+control, some will have label+control1+control2 etc.</p> <p>I am new to bootstrap. I have come to the following solution:</p> <p>jsfiddle: <a href="http://jsfiddle.net/9HkUb/2/" rel="noreferrer">http://jsfiddle.net/9HkUb/2/</a></p> <p>The question is: <strong>is this the correct way to do this?</strong> Is not it violating the bootstrap semantics?</p> <p><strong>I do not understand when to use <code>form-group</code></strong>, am I using correctly?</p> <p>Should not I include <strong>some <code>class="row"</code> here for correct semantics</strong>"</p> <p>HTML:</p> <pre><code>&lt;div class="container"&gt; ... &lt;some content here&gt; .... &lt;form class="form-horizontal"&gt; &lt;fieldset&gt; &lt;legend&gt;Portfolio&lt;/legend&gt; &lt;div class="col-xs-6"&gt; &lt;div class="form-group"&gt; &lt;label for="name" class="col-xs-4 control-label"&gt;Label1&lt;/label&gt; &lt;div class="col-xs-8"&gt; &lt;input type="text" class="form-control" placeholder="control1" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="form-group"&gt; &lt;label for="name" class="col-xs-4 control-label"&gt;label2&lt;/label&gt; &lt;div class="col-xs-8"&gt; &lt;input type="text" class="form-control" placeholder="control2" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="form-group"&gt; &lt;label for="name" class="col-xs-4 control-label"&gt;label3&lt;/label&gt; &lt;div class="col-xs-8 form-inline"&gt; &lt;div class="form-group col-xs-6"&gt; &lt;input type="text" class="form-control" placeholder="control1" /&gt; &lt;/div&gt; &lt;div class="form-group col-xs-6"&gt; &lt;input type="text" class="form-control" placeholder="control2" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="col-xs-6"&gt; &lt;div class="form-group"&gt; &lt;label for="name" class="col-xs-4 control-label"&gt;Label1&lt;/label&gt; &lt;div class="col-xs-8"&gt; &lt;input type="text" class="form-control" placeholder="control1" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="form-group"&gt; &lt;label for="name" class="col-xs-4 control-label"&gt;label2&lt;/label&gt; &lt;div class="col-xs-8"&gt; &lt;input type="text" class="form-control" placeholder="control2" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/fieldset&gt; &lt;/form&gt; &lt;/div&gt; </code></pre> <ul> <li>I have seen all Bootstrap form examples, but I do not get how to seperate form into two columns. I have also read the whole documentation, but I feel that this is not the right way how to use col and other classes.</li> </ul>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload