1

Im trying to resize jumbotron so that it fills the entire screen. Basic site, just a row of nav pills with 1 giant jumbotron under it. I have only been able to find info on changing the width of a jumbotron

Daniel Brow
  • 35
  • 5

2 Answers2

1

Yes, it's possible to change the height of a jumbotron. In the css of your code for jumbotron like chdltest said:

"Apply a height of 100% to the jumbotron, it's containers, body, and html"

The code for this should be something along these lines:

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

This makes the height and width 100% for the jumbotron (if it's a class, if it's an id #jumbotron), body and html. Though keep in mind this needs to go after the declaration already of the height and width for your jumbotron, body and HTML. Though I'm assuming your linking this all to a separate css file.

Another similar question though not specific to the jumbotron was Make div 100% height of browser window. In the answer to this question it goes into viewports as an alternative to using the height:100%;, James goes into height:100vh;, which could be another alternative.

Community
  • 1
  • 1
frog1944
  • 245
  • 5
  • 13
0

Apply a height of 100% to the jumbotron, its containers, body, and html.

Giving a height of 100% to only the jumbotron will only tell the jumbotron to have the height of its container (which I don't know what your structure is like because you did not provide anything other than a question).

Applying a height of 100% to its containers as well as to the body and height will enable it to be the full height of your screen.

chdltest
  • 853
  • 2
  • 6
  • 18