title: Change position of containers in bootstrap
body: <p>I'm still learning bootstrap and I would like to know what should I use move things inside a bootstrap container.
  My question is a little bit strange but maybe with images and code it will be easier to understand.</p>
  
  <p>I want to create a form in that precise position like in <a href="https://i.stack.imgur.com/lYk9O.jpg" rel="nofollow noreferrer">this</a> image but I don´t know how can to do it. I don't understand if I have to apply margins or padding neither if it is suppose to change/apply css in the row or in the container.</p>
  
  <p>At this moment my website looks like <a href="https://i.stack.imgur.com/hQO8S.jpg" rel="nofollow noreferrer">this</a> and my code is this one:</p>
  
  <pre><code> &lt;div id="form"&gt;
          &lt;div class="container-fluid"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-xs-12 col-sm-offset-7"&gt;
  
                      &lt;form class="form-group"&gt;
                          &lt;label for="testEmail"&gt;Email address&lt;/label&gt;
                          &lt;input type="email" class="form-control" id="testEmail" placeholder="Email"&gt;
                      &lt;/form&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Can you guys explain me how can I change my form position and how it is suppose to move things inside bootstrap?</p>
  
  <p>Thanks</p>