Bootstrap multiple jumbotrons

Question

I am attempting to build a site that - my initial thought- requires 2 overlapping jumbotron - using bootstrap 3. 1 jumbotron - stretching 100% of the width - traditional grey colouring. 1 overlapping - additional jumbotron that is reduced to the 'container' size - but this will have an image background.

1st attempt - with overlapping jumbotron - this allowed responsive imaging however the sizing of the full width jumbotron then did not match the size of the overlapping image.

<div class = "jumbotron">
<div class ="jumbotron container>//image 
 <p>Sample text</p>
</div>
</div>

2nd way - with 1 jumbotron - however this then prevents my image being responsive:

<div class="jumbotron">
    <div class="row">   
     <div class="col-md-8">
   <div class="jumbpic">
    <img src="style/images/car2.png"></div></div>
    <div class="col-md-4">
     <p>Sample text</p>

Is there a simple alternative to allow the full width jumbotron but allow a central image that can be responsive to screen size too?

Answer 1

I'm probably not completely understanding your question, but what about wrapping the jumbotron in a .well?

This gives you a responsive image inside the jumbotron, and gives you the gray enclosing background you're looking for. Just add the .img-responsive class to your image to make it responsive, and make sure it's a big enough image to fill the screen. I added the .center-block class to center the image.

Edited to remove jumbotron padding per OP in comments

<style>
    .jumbotron {
        padding-top: 0;
    }
</style>

<div class="well">
    <div class="jumbotron">
        <img src="http://placehold.it/1920x800" class="img-responsive center-block">
        <p>Sample text</p>
    </div>
</div>

Fiddle...

---

Edit: This will give you a jumbotron with a background image. Again, make sure you're using a large image...

<style>
    .jumbotron {
        background: url('http://p1.pichost.me/i/59/1828782.jpg');
        color: white;
    }
</style>

<div class="well">
    <div class="jumbotron">
        <div class="container">
            <h1>Hello, world!</h1>
            <p>Sample text</p>
            <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
        </div>
    </div>
</div>

Fiddle...

Answer 2

You don't need two jumbotrons if I got you correctly. You just need to specify your image to be responsive.

<div class = "jumbotron">
    <div class ="container>
         <img src="your-image-source" class="img-responsive">
    </div>
</div>

Read about responsive images here: http://getbootstrap.com/css/#images