Bootstrap col-md-offset-* not working : <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>
