title: Bootstrap col-md-4 inside a col-md-12
body: <p>I'm trying to have a col-md-4 inside a col-md-12, but it is not working. </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;form role="form" action="" method="post"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-xs-6 col-md-offset-3"&gt;
              &lt;div class="col-md-12"&gt;
                  &lt;h3&gt;Information&lt;/h3&gt;
                  &lt;!-- This is fine because I want the name to be full size of the line --&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label class="control-label"&gt;Name&lt;/label&gt;
                      &lt;input maxlength="200" type="text" required="required" class="form-control" placeholder=" Name" /&gt;
                  &lt;/div&gt;
  
                  &lt;!-- Here I want to break 3 input side by side --&gt;
                  &lt;!-- Not working. Each rules is in one line --&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label class="control-label"&gt;Rules&lt;/label&gt;
                      &lt;div class="row"&gt;
                        &lt;div class="col-md-12"&gt;
                            &lt;input type="number" required="required" class="col-md-4" placeholder="Rule1" /&gt;
                            &lt;input type="number" required="required" class="col-md-4" placeholder="Rule2" /&gt;
                            &lt;input type="number" required="required" class="col-md-4" placeholder="Rule3" /&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;button class="btn btn-primary nextBtn btn-lg pull-right" type="button" &gt;Next&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Does anyone know how can I put the Rules side by side in the row?</p>
  
  <p>Thanks</p>