title: Bootstrap form layout the 'correct' way?
body: <p>Heres my form:</p>
  
  <pre><code>&lt;div class="row"&gt;
  
  &lt;form class="well form-inline span6 offset3"&gt;
  
      &lt;select name="data[Number][country]" id="NumberCountry"&gt;
          &lt;option&gt;Choose a country code:&lt;/option&gt;
          &lt;option value="+44"&gt;+44&lt;/option&gt;
          &lt;option value="+81"&gt;+81&lt;/option&gt;
          &lt;option value="+1"&gt;+1&lt;/option&gt;
          &lt;option value="+70"&gt;+70&lt;/option&gt;
      &lt;/select&gt;   
      &lt;input type="text" class="input-small span2" placeholder="eg. 7764"&gt;
      &lt;input type="password" class="input-small span2" placeholder="eg. 123456"&gt;
      &lt;button class="btn btn-large btn-primary"&gt;Activate Your SIM&lt;/button&gt;
  
  &lt;/form&gt;
  
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Heres a working example:</p>
  
  <p><a href="http://jsfiddle.net/pickledegg/aJfMx/6/" rel="noreferrer">http://jsfiddle.net/pickledegg/aJfMx/6/</a></p>
  
  <p>I've bodged it up using Bootstrap, but I'm trying to get a grasp on how the rows and spans should be used for 'fine tuning' the layout.</p>
  
  <p>I want the button to be centralised and have some space above it. As you can see I've fudged some rows and span classes in there, but can someone show me the 'best practice' way of doing this? It will help me form a clearer picture of how to properly use this framework.</p>