1
00:00:00,520 --> 00:00:03,680
In this video,
we'll begin building the large page header

2
00:00:03,680 --> 00:00:08,560
containing the Full Stack Conf headline,
lead text, and call to action buttons.

3
00:00:08,560 --> 00:00:12,810
This is an important section of the page,
so we'll need to draw attention to it.

4
00:00:12,810 --> 00:00:15,960
Bootstrap has just the component for
that, Jumbotron.

5
00:00:15,960 --> 00:00:19,880
The Jumbotron component is ideal for
showcasing key content and

6
00:00:19,880 --> 00:00:20,960
calls to action.

7
00:00:20,960 --> 00:00:23,920
It gives important content
the emphasis it requires.

8
00:00:23,920 --> 00:00:27,284
So, back in Index.html,
right below the navbar and

9
00:00:27,284 --> 00:00:32,468
outside of the main container, I'll add
comments for the Jumbotron component.

10
00:00:41,831 --> 00:00:44,729
I'm going to use the Fluid
jumbotron shown here so

11
00:00:44,729 --> 00:00:49,790
that it extends the full viewport width
without the rounded corners on each side.

12
00:00:49,790 --> 00:00:52,870
So I'll copy the fluid
jumbotron snippet and

13
00:00:52,870 --> 00:00:55,959
paste it between my
jumbotron comment tags.

14
00:01:04,110 --> 00:01:07,362
In my jumbotron,
I want a larger heading, so

15
00:01:07,362 --> 00:01:10,590
I will change the h1 class to display-2.

16
00:01:10,590 --> 00:01:16,972
Then, between the h1 tags, I'll add
the conference name, Full Stack Conf.

17
00:01:19,718 --> 00:01:22,850
Then I'll add a short
description as the lead text.

18
00:01:22,850 --> 00:01:27,024
So I'll replace the paragraph text with

19
00:01:27,024 --> 00:01:32,556
A One-day Conference About
All Things JavaScript.

20
00:01:38,442 --> 00:01:42,932
The jumbotron displays dark text against
a light grey background by default, but

21
00:01:42,932 --> 00:01:47,100
you can change the colors using
Bootstrap's color scheme classes.

22
00:01:47,100 --> 00:01:49,430
So let's use the same white text and

23
00:01:49,430 --> 00:01:53,620
light blue background combination we
used earlier in the coming soon page.

24
00:01:53,620 --> 00:01:58,608
So I'll give jumbotron the class bg-info.

25
00:02:02,646 --> 00:02:07,277
And I want to display white text
against the blue background, so

26
00:02:07,277 --> 00:02:09,781
I'll add the class text-white.

27
00:02:13,972 --> 00:02:20,316
Finally, I'll center align the content
inside the jumbotron starting

28
00:02:20,316 --> 00:02:27,400
in the small break point range by giving
its container a class text-sm-center.

29
00:02:28,760 --> 00:02:33,521
And I'll increase the top padding of
the jumbotron container by three rem

30
00:02:33,521 --> 00:02:36,605
using the utility class PT,
or padding top 5.

31
00:02:40,128 --> 00:02:42,140
That was pretty quick and easy, right?

32
00:02:42,140 --> 00:02:46,310
So up next, we'll add call out buttons
to the page using the button and

33
00:02:46,310 --> 00:02:47,570
button group components.