CODEWITHSUNDEEP
csstwitter-bootstraphtmlz-index
lowercase
lowercase

Reputation: 1220

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 image as below...

<div class="container-fluid">
<div class="jumbotron">
    <div class="container">
        <div class="row">
        <div class="col-md-8">text here</div>
        <div class="col-md-4">text here</div>
        </div>
    </div>
</div>

Here is the rest of the site...

 <div class="container">rest of site goes here
 </div>

What I want to do is have my entire site/container BELOW the jumbotron - slide up and cover half of it's height. Obviously as is, the container for the site content is cleared below the jumbotron, but i need a solution to get it up about 100px to cover the lower half of jumbotron.

I have tried both z-index methods and absolute positioning but can't get either to work. Any suggestions?

A SAMPLE TO WORK WITH HERE - http://jsfiddle.net/9b9Da/7/

Upvotes: 4

Views: 15079

Answers (2)

Paul
Paul

Reputation: 1

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

Bootstrap classes

Upvotes: 0

MackieeE
MackieeE

Reputation: 11862

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 

<div class="jumbotron">
     <div class="col-md-8 jumbotext">text here</div>
     <div class="col-md-4 jumbotext">text here</div>
</div>
<div class="container" id="content">
    <div class="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/

Upvotes: 2

Related Questions