title: Bootstrap: how to position an element horizontally anywhere in a grid design?
body: <p>I am learning Bootstrap. I am using Bootstrap for a design with fixed width. From the online documentation, I know it is easy to position elements starting from a column. For example:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Bootstrap version&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="author" content=""&gt;
  
      &lt;!-- Le styles --&gt;
      &lt;link href="css/bootstrap.css" rel="stylesheet"&gt;
      &lt;style type="text/css"&gt;
          body {
              padding-top: 60px;
              padding-bottom: 40px;
          }
      &lt;/style&gt;
      &lt;link href="css/bootstrap-responsive.css" rel="stylesheet"&gt;
  
      &lt;link href="learn.css" rel="stylesheet"&gt;
  
      &lt;!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --&gt;
      &lt;!--[if lt IE 9]&gt;
          &lt;script src="http://html5shim.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  
  &lt;div class="container"&gt;
      &lt;div class="row"&gt;
      &lt;div class="span3" style="background-color:grey"&gt;span3&lt;/div&gt;
      &lt;div class="span5" style="background-color:pink"&gt;&lt;div id="text"&gt;span5 text&lt;/div&gt;&lt;/div&gt;
      &lt;div class="span4" style="background-color:navy"&gt;span4&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt; 
  
  
      &lt;!-- Le javascript
      ================================================== --&gt;
      &lt;!-- Placed at the end of the document so the pages load faster --&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;window.jQuery || document.write('&lt;script src="js/jquery-1.9.1.min.js"&gt;&lt;\/script&gt;')&lt;/script&gt;    
      &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt; 
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>In the above, </p>
  
  <pre><code>&lt;div id="text"&gt;span5 text&lt;/div&gt;
  </code></pre>
  
  <p>horizontally starts exactly where the fourth column starts. I would like to know how Bootstrap expert users use CSS to position </p>
  
  <pre><code>&lt;div id="text"&gt;span5 text&lt;/div&gt;
  </code></pre>
  
  <p>to make it start between the third and fourth columns or ends between the eighth and ninth columns. </p>
  
  <p>I am thinking about using either:</p>
  
  <pre><code>&lt;style&gt;
  #text {
  margin-left:-10px;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>or </p>
  
  <pre><code>&lt;style&gt;
  #text {
      position:relative;
      left:-10px;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>to position the div, but not sure whether which is preferred and would like to know what experts do and some other ways.</p>
  
  <p>Thanks!</p>