- Building a Navbar 9:17
- Using Jumbotron to Showcase Key Content 2:48
- Buttons and Button Groups 5:22
- Inline Navs and Dropdown Buttons 5:09
- Displaying Content with Cards 7:32
- Building the Schedule with a List Group 6:26
- Displaying a Modal Window 5:02
- Using ScrollSpy to Highlight Nav Links 4:22
- Bootstrap Components Review 6 questions
Preview
Video Player
00:00
00:00
Using Jumbotron to Showcase Key Content
2:48Bootstrap's Jumbotron component is ideal for key marketing messages and calls to action; it gives important content the emphasis it requires.
In this video,
we'll begin building the large page header
0:00
containing the Full Stack Conf headline,
lead text, and call to action buttons.
0:03
This is an important section of the page,
so we'll need to draw attention to it.
0:08
Bootstrap has just the component for
that, Jumbotron.
0:12
The Jumbotron component is ideal for
showcasing key content and
0:15
calls to action.
0:19
It gives important content
the emphasis it requires.
0:20
So, back in Index.html,
right below the navbar and
0:23
outside of the main container, I'll add
comments for the Jumbotron component.
0:27
I'm going to use the Fluid
jumbotron shown here so
0:41
that it extends the full viewport width
without the rounded corners on each side.
0:44
So I'll copy the fluid
jumbotron snippet and
0:49
paste it between my
jumbotron comment tags.
0:52
In my jumbotron,
I want a larger heading, so
1:04
I will change the h1 class to display-2.
1:07
Then, between the h1 tags, I'll add
the conference name, Full Stack Conf.
1:10
Then I'll add a short
description as the lead text.
1:19
So I'll replace the paragraph text with
1:22
A One-day Conference About
All Things JavaScript.
1:27
The jumbotron displays dark text against
a light grey background by default, but
1:38
you can change the colors using
Bootstrap's color scheme classes.
1:42
So let's use the same white text and
1:47
light blue background combination we
used earlier in the coming soon page.
1:49
So I'll give jumbotron the class bg-info.
1:53
And I want to display white text
against the blue background, so
2:02
I'll add the class text-white.
2:07
Finally, I'll center align the content
inside the jumbotron starting
2:13
in the small break point range by giving
its container a class text-sm-center.
2:20
And I'll increase the top padding of
the jumbotron container by three rem
2:28
using the utility class PT,
or padding top 5.
2:33
That was pretty quick and easy, right?
2:40
So up next, we'll add call out buttons
to the page using the button and
2:42
button group components.
2:46