1
00:00:00,480 --> 00:00:04,950
A jumbotron allows you to create a special area for important content.

2
00:00:04,980 --> 00:00:12,130
This HDMI page contains an example of what the Jumbotron looks like we can see a very large header followed

3
00:00:12,130 --> 00:00:17,170
by a smaller subtitle in order to create one.

4
00:00:17,260 --> 00:00:20,770
We just need to create a div and add the Jumbotron class to it.

5
00:00:22,410 --> 00:00:27,040
And you can see that we've done that here inside our container.

6
00:00:27,040 --> 00:00:34,030
We've created a div element in applied the Jumbotron class.

7
00:00:34,130 --> 00:00:38,370
You can then use the header and paragraph tags for the heading In subtitle.

8
00:00:38,810 --> 00:00:45,920
So for our heading we've used the h1 tags and for this subtitle we've just used the paragraph element

9
00:00:48,120 --> 00:00:54,210
the Jumbotron can be placed inside or outside the container if placed outside it'll take up the full

10
00:00:54,210 --> 00:00:55,720
length of the viewport.

11
00:00:55,860 --> 00:01:05,250
So let's go ahead and give that a try I'll take the block of code relating to the jumbotron and cut

12
00:01:05,250 --> 00:01:13,610
it and paste it outside of the container or save the file and refresh the web browser and we can see

13
00:01:13,610 --> 00:01:19,910
that the Jumbotron now extends to the full length of the browser's content area.

14
00:01:19,910 --> 00:01:28,490
It's also fully responsive so when I resize the browser you can see that it remains the full length

15
00:01:29,420 --> 00:01:30,920
and shrinks as it needs to

16
00:01:38,120 --> 00:01:40,720
an alternative to the Jumbotron.

17
00:01:40,730 --> 00:01:48,510
Is the page header class so I'll just put this back inside the container and instead of the Jumbotron

18
00:01:48,540 --> 00:01:51,180
this time we use the page header class

19
00:01:54,700 --> 00:01:57,450
so I'll save the file and refresh the browser.

20
00:01:57,780 --> 00:02:06,130
And as you can see this class adds a horizontal line under the heading and some extra space around the

21
00:02:06,130 --> 00:02:06,700
elements

22
00:02:10,780 --> 00:02:18,900
so we can we can get rid of this subtitle in that we will just have heading on its own.

23
00:02:19,160 --> 00:02:21,250
And then your content can start right below it.

24
00:02:22,310 --> 00:02:27,050
So that's another way to emphasize important content on your web page.