title: align content with bootstrap strange behaviour
body: <p>I am working with vuejs and bootstrap so I am calling different components and attach them inside my HTML dynamically.</p>
  
  <p>My problem is I don't get the desired effect, at the moment I have this:</p>
  
  <p><a href="https://i.stack.imgur.com/msB53.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/msB53.png" alt="image"></a></p>
  
  <p>the section title gives too much space related to the input and I don't know why the section is a different component and the data at the bottom gets loaded dynamically depending on the select box choice.</p>
  
  <p>the rows columns and cells are a horizontal form but it occupies all the width of my row, I want the inputs to be lower and the button at centre a little bigger, I can't set it like I want if I try for example to increase button it will not be at centre anymore.</p>
  
  <p>So here is my code:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div&gt;
                  &lt;h1 class="text-center"&gt;Document Creation&lt;/h1&gt;
              &lt;/div&gt;
              &lt;div class="col-md-4"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-md-6"&gt;
  
                      &lt;/div&gt;
                      &lt;div class="col-md-6"&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-md-8 margin-above"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label class="control-label col-sm-2"&gt;Section&lt;/label&gt;
                      &lt;div class="col-sm-6"&gt;
                          &lt;select class="form-control" v-model="currentView"&gt;
                              &lt;option v-for="(item,index) in sections" :value="item.key"&gt;{{item.text}}&lt;/option&gt;
                          &lt;/select&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- Here we load the diferent sections based on the selection choice --&gt;
          &lt;component v-bind:is="currentView"&gt;
              &lt;!-- component changes when vm.currentView changes! --&gt;
          &lt;/component&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p><strong>inside the component the other component that has the rows and cells and columns get loaded like this:</strong></p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-offset-4"&gt;
              &lt;form class="form-inline margin-above"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="rows"&gt;rows:&lt;/label&gt;
                      &lt;input type="number" min="1" value="1" class="form-control" id="rows"&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="columns"&gt;columns:&lt;/label&gt;
                      &lt;input type="number" min="1" value="1" class="form-control" id="cols"&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="cells"&gt;cells:&lt;/label&gt;
                      &lt;input type="number" min="1" value="1" class="form-control" id="cols"&gt;
                  &lt;/div&gt;
                  &lt;div class="text-center"&gt; 
                      &lt;button type="submit" class="btn btn-success margin-above2"&gt;Add Table&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>Please, I need some help trying to display it correctly. Thanks.</p>