title: Dividing form into two columns with twitter bootstrap
body: <p>What is the correct way to style <code>form</code> with <a href="https://getbootstrap.com/" rel="nofollow noreferrer">bootstrap</a> in the following scenario:</p>
  
  <p><img src="https://i.stack.imgur.com/fA5rQ.png" alt="two columns form view"></p>
  
  <ol>
  <li><p>I need to use fieldset (that will be styled later)</p></li>
  <li><p>I need to divide <code>form</code> into two columns</p></li>
  <li><p>Each column has label+control, some will have label+control1+control2 etc.</p></li>
  </ol>
  
  <p>I am new to bootstrap. I have come to the following <a href="http://jsfiddle.net/9HkUb/2/" rel="nofollow noreferrer">solution (jsfiddle)</a>.</p>
  
  <p>The question is: <strong>is this the correct way to do this?</strong> Does it not violate the bootstrap semantics?</p>
  
  <p><strong>I do not understand when to use <code>form-group</code></strong>, am I using it correctly?</p>
  
  <p>Should I not 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>
  
  <p>I have seen all Bootstrap form examples, but I do not get how to separate <code>form</code> into two columns. I have also read the whole <a href="https://getbootstrap.com/docs/4.2/getting-started/introduction/" rel="nofollow noreferrer">documentation</a>, but I feel that this is not the right way how to use <code>col</code> and other classes.</p>