title: CSS bootstrap : How offset works in bootstrap
body: <p>i am not css developer but i am trying to lean bootstrap usage. so i was reading article from this url <a href="http://www.c-sharpcorner.com/article/overview-of-bootstrap-buttons-and-grid-offset/" rel="nofollow noreferrer">http://www.c-sharpcorner.com/article/overview-of-bootstrap-buttons-and-grid-offset/</a></p>
  
  <p>i am curious to know how bootstrap offset works?</p>
  
  <p>see some code example</p>
  
  <p>1) </p>
  
  <pre><code>&lt;div class="container"&gt;  
      &lt;div class="row"&gt;  
          &lt;div class="col-md-3col-md-offset-3 "&gt;  
              &lt;div class="customDiv"&gt;column 1&lt;/div&gt;  
          &lt;/div&gt;  
          &lt;div class="col-md-3"&gt;  
              &lt;div class="customDiv"&gt;column 2&lt;/div&gt;  
          &lt;/div&gt;  
  &lt;/div&gt;
  </code></pre>
  
  <p>how col-md-offset-3 push two column at center. see the screen shot.
  <a href="https://i.stack.imgur.com/J4Zht.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/J4Zht.jpg" alt="enter image description here"></a></p>
  
  <p>2) see this one</p>
  
  <pre><code>&lt;div class="container"&gt;  
      &lt;div class="row"&gt;  
          &lt;div class="col-md-3"&gt;  
              &lt;div class="customDiv"&gt;column 1&lt;/div&gt;  
          &lt;/div&gt;  
          &lt;div class="col-md-3 col-md-offset-6 "&gt;  
              &lt;div class="customDiv"&gt;column 2&lt;/div&gt;  
          &lt;/div&gt;  
      &lt;/div&gt;  
  &lt;/div&gt;
  </code></pre>
  
  <p>how this offset col-md-offset-6 can push two column to corner. one to left and another to right. see the screen shot <a href="https://i.stack.imgur.com/SF941.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SF941.jpg" alt="enter image description here"></a></p>
  
  <p>3) how image comes at center see the code and screen shot</p>
  
  <pre><code>&lt;div class="container"&gt;  
      &lt;div class="row"&gt; &lt;img src="one.png" class="col-md-4 col-md-offset-4 img-responsive" /&gt; &lt;/div&gt;  
  &lt;/div&gt;  
  </code></pre>
  
  <p>please explain my each points and tell me how offset works in bootstrap. thanks
  <a href="https://i.stack.imgur.com/f2JqW.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/f2JqW.gif" alt="enter image description here"></a></p>