Container in Bootstrap 3 that perfectly adapts to the HEIGHT of the viewers' screen size

Question

Here is the problem.

I use bootstrap 3.0 for a very, very basic website. Still, I would like to add some refinement but I need help.

The structure of the website is very basic: a container and several jumbotrons inside the container.

I would like to have EACH Jumbotron to perfectly stretch to the height of the user's browser window, so that whatever the media may be (smartphone, web, etc) a visitor will see ENTIRELY and ONLY one jumbotron at the time without the need of scrolling down with the mouse...

Do you have an idea? Many thanks!! ;)

Answer 1

You could add a special CSS class to the container and set it to 100% height. The HTML and BODY must also be 100% height...

html,body {height:100%;}
.special,.special .jumbotron {height:100%;}

Demo: http://bootply.com/80826

This however does not address the issue of seeing only 1 jumbotron at a time.. which is more of a navigation issue than a size issue. You may want to use a carousel for the jumbotrons if you don't want the user to scroll down at all.

Answer 2

I believe what you want is actually stacking, full-screen, responsive backgrounds, or stacking divs that conform to the height of the window / viewport.

That's been answered over here:

Full-screen responsive background image