A jumbotron allows you to create a special area for important content.
This HDMI page contains an example of what the Jumbotron looks like we can see a very large header followed
by a smaller subtitle in order to create one.
We just need to create a div and add the Jumbotron class to it.
And you can see that we've done that here inside our container.
We've created a div element in applied the Jumbotron class.
You can then use the header and paragraph tags for the heading In subtitle.
So for our heading we've used the h1 tags and for this subtitle we've just used the paragraph element
the Jumbotron can be placed inside or outside the container if placed outside it'll take up the full
length of the viewport.
So let's go ahead and give that a try I'll take the block of code relating to the jumbotron and cut
it and paste it outside of the container or save the file and refresh the web browser and we can see
that the Jumbotron now extends to the full length of the browser's content area.
It's also fully responsive so when I resize the browser you can see that it remains the full length
and shrinks as it needs to
an alternative to the Jumbotron.
Is the page header class so I'll just put this back inside the container and instead of the Jumbotron
this time we use the page header class
so I'll save the file and refresh the browser.
And as you can see this class adds a horizontal line under the heading and some extra space around the
elements
so we can we can get rid of this subtitle in that we will just have heading on its own.
And then your content can start right below it.
So that's another way to emphasize important content on your web page.