title: Can I have a Bootstrap col inside of another col?
body: <p>I am still new to Bootstrap and I am trying to figure out what is correct and what is not. Is it acceptable to have a <code>col</code> inside of a <code>col</code>? In the example below, I have a form that I want to fit half of the screen. I also want certain form-control elements to be half size while other of full width. Would this be the correct way to go about this or is there a better way?</p>
  
  <p>Example code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- Latest compiled and minified CSS --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"&gt;
  
  &lt;!-- Latest compiled and minified JavaScript --&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;section class="row"&gt;
    &lt;div class="container"&gt;
      &lt;div class="col-xs-12 text-center"&gt;
        &lt;h1&gt;Contact&lt;/h1&gt;
      &lt;/div&gt;
      &lt;form class="col-xs-12 col-sm-8 col-sm-offset-2 form-horizontal"&gt;
        &lt;div class="form-group form-group-lg"&gt;
          &lt;div class="col-sm-12"&gt;
            &lt;input class="form-control" type="text" placeholder="name"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="form-group form-group-lg"&gt;
          &lt;div class="col-xs-6"&gt;
            &lt;input class="form-control" type="text" placeholder="email"&gt;
          &lt;/div&gt;
          &lt;div class="col-xs-6"&gt;
            &lt;input class="form-control" type="text" placeholder="website"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;button type="submit" class="btn btn-warning btn-lg pull-right col-xs-12"&gt;Submit&lt;/button&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>