title: Bootstrap col-md-offset-* not working
body: <p>I'm trying to add Bootstrap offset class in my code to achieve diagonal alignment like this:</p>
  
  <p><a href="https://i.stack.imgur.com/FHTgp.png" rel="noreferrer"><img src="https://i.stack.imgur.com/FHTgp.png" alt="Image "></a></p>
  
  <p>But I don't know what offset should I use. I've tried couple of offsets to achieve this but no use.Text is covering whole jumbotron.Here is my code</p>
  
  <p>Html:</p>
  
  <pre><code>&lt;div class="jumbotron"&gt;
          &lt;div class="container"&gt;
              &lt;div class="row"&gt;
                  &lt;div&gt;
                      &lt;h2 class="col-md-4 col-md-offset-4"&gt;Browse.&lt;/h2&gt;
                      &lt;h2 class="col-md-4 col-md-offset-4"&gt;create.&lt;/h2&gt;
                      &lt;h2 class="col-md-4 col-md-offset-4"&gt;share.&lt;/h2&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.jumbotron {
      height: 500px;
      width: 100%;
      background-image: url(img/bg.jpg);
      background-size: cover;
      background-position: center;
  }
  
  .jumbotron h2 {
      color: white;
      font-size: 60px;
  }
  
  .jumbotron h2:first-child {
      margin: 120px 0 0;
  }
  </code></pre>
  
  <p>Please guide me.Thank you in advance.</p>