Bootstrap 3 Div Over Jumbotron

I am using Bootstrap 3, and have a problem getting a div to sit over a jumbotron header. I am using the jumbotron class to give me a full width, responsive header with a background

Solution 1:

As stated in comments, Bootstrap 3 doesn't have a .container-fluid class, which was removed in Bootstrap 2.3.2 as .rows are full width by default (Mobile first approach). position: relative was then used to offset your overlying content <div> to appear half way over the .jumbotron

<divclass="jumbotron"><divclass="col-md-8 jumbotext">text here</div><divclass="col-md-4 jumbotext">text here</div></div><divclass="container"id="content"><divclass="row">
        This content needs to float over the Jumbotron above
    </div></div><style>#content {
       position: relative;
       bottom: 80px;
       z-index: 500;
       opacity: 0.6;
   }

   #content > .row {
       min-height: 400px;
       background: #cccccc;
   }

   .jumbotron > .jumbotext {
       z-index: 700;
   }
</style>

Fiddle: http://jsfiddle.net/9b9Da/9/

Solution 2:

I'm using bootstrap 3 and it has .container-fluid. It's also listed in the bootstrap docs and on the W3.

Bootstrap classes