Bootstrap col-md-offset-* not working

Question

I'm trying to add Bootstrap offset class in my code to achieve diagonal alignment like this:

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

Html:

<div class="jumbotron">         <div class="container">             <div class="row">                 <div>                     <h2 class="col-md-4 col-md-offset-4">Browse.</h2>                     <h2 class="col-md-4 col-md-offset-4">create.</h2>                     <h2 class="col-md-4 col-md-offset-4">share.</h2>                 </div>             </div>         </div>     </div> 

CSS:

.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; } 

Please guide me.Thank you in advance.

Answer 1

It works in bootstrap 4, there were some changes in documentation.We don't need prefix col-, just offset-md-3 e.g.

<div class="row">    <div class="offset-md-3 col-md-6"> Some content...    </div> </div> 

Here doc.