Bootstrap several jumbotrons

Question

I am trying to create a site that - my initial thought - requires 2 overlapping jumbotron - using bootstrap 3. 1 jumbotron - stretching 100% of the width - traditional gray color. 1 overlap is an extra jumbotron that comes down to the size of the "container", but it will have a background image.

The 1st attempt - with overlapping jumbotron - this allowed us to respond to the image, however, 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> 

The second way is with 1 jumbotron - however this does not allow my image to respond:

 <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 that allows using a full-width jumbotron, but allowing a central image that can also respond to screen size?

Answer 1

I probably don't fully understand your question, but what about jumbotron packaging in .well?

This gives you a responsive image inside jumbotron and gives you the gray closed background you are looking for. Just add the .img-responsive class to your image to make it responsive, and make sure the image is large enough to fill the screen. I added a .center-block class to center the image.

Edited to remove jumbotron padding for 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 are 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 do not need two jumbotrons, if I understand you correctly. You just need to specify that your image is responsive.

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

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