Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Bootstrap simplifies many complex or time-consuming tasks like building navigations, from controls, drop down menus and more. In this video, we'll continue building the Full Stack Conf site using Bootstrap's UI components, starting with the navbar.
[MUSIC]
0:00
Bootstrap simplifies many complex or time
consuming tasks like building navigation
0:04
systems, form controls,
drop down menus, and more.
0:09
For example, interactive
components like drop down, alert,
0:12
and modal windows require
JavaScript to work.
0:16
But Bootstrap let's you quickly
create an interactive component
0:20
by simply giving an element a class,
ID, or data attribute.
0:23
You don't have to write any JavaScript,
because Bootstrap already provides it.
0:27
In the last section of this course,
0:30
you saw how Bootstrap greatly
simplifies page layout.
0:33
CSS layout can be tricky, and
0:37
creating your own CSS grid
system is time consuming.
0:38
So Bootstrap's predefined classes and grid
let you focus on the higher level parts of
0:41
your project,
instead of worrying about small,
0:46
repetitive tests like calculating column
widths, loads, and writing media queries.
0:48
Bootstrap components let us create
interactive components just as easily.
0:53
So coming up in this section,
we'll press on and build out the rest of
0:57
the Full Stack Conf site using
some of Bootstrap's UI components.
1:01
So let's start with a nav bar.
1:05
Click the Components link to view
all the available components.
1:08
Now a good way to start using any of these
components is to copy their code snippets
1:13
from the Bootstrap docs,
paste them into your project,
1:16
then make changes to the HTML and
CSS to customize the components.
1:19
So as you're building the site, feel free
to experiment with other components to
1:23
explore the capabilities of Bootstrap.
1:27
There's one key component missing
from our website, the navigation.
1:30
So let's quickly build a navigation
that looks like the one in the mock-up.
1:34
Back in index.html,
below the opening body tag,
1:38
I'll write a set of HTML comments for
my navbar.
1:43
I want the navigation to stretch from
edge to edge of the browser window.
1:48
So I'll create the navbar outside of the
container, that way the navigation isn't
1:53
constrained by the position and
width of the container div.
1:57
So Bootstrap comes with lots of easily
customizable navigation components,
2:02
that are built using Flexbox.
2:07
For instance, you can quickly add
a basic navigation to your site,
2:09
using the base nav component snippet.
2:14
So I'll copy this snippet, and
paste it between my navbar comments
2:17
Then you have the option to align
the nav horizontally or vertically.
2:26
Or you can quickly generate
a tabbed navigation by simply
2:33
adding the class nav-tabs
2:37
You can even display pill shaped
navigation links, like this,
2:49
using the class nav-pills.
2:54
Now the website mock-up shows that we
should create a navigation bar containing
3:02
the navigation links on the left side, and
3:07
a link to the organizer's
website on the right side.
3:09
Bootstrap has the perfect component for
this, Navbar.
3:13
Navbar is a wrapper for
positioning navigation, branding, and
3:19
other elements into a navigation header.
3:23
As you can see, you can even include
a search field in the navbar.
3:26
So I'm going to use this nav snippet,
which is similar to the regular nav we
3:30
have now, except you can use
different color schemes and
3:35
it's easier to position
the navigation menu.
3:38
It even collapses the navigation in the
extra small to medium breakpoint range,
3:41
and displays a navbar-toggle
icon to open the nav menu.
3:47
So I'll use one of these nav snippets
provided here to build my navbar.
3:51
And the first one uses an unordered
list to lay out the nav links.
3:56
And the second snippet works and
looks exactly the same way, except that it
4:02
doesn't use a list based approach, instead
it uses a div with nested anchor elements.
4:06
So I'll copy this second snippet and
4:12
replace the nav component
that's in the HTML file.
4:14
Next I'll change the links to
match the content in our site.
4:26
So for the home link,
I'll make the href attribute #home,
4:29
then I'll replace Features with About and
set its href to #about.
4:36
Below that we'll set
this link to Speakers.
4:43
And the final link will be
the link to the Schedule.
4:50
And we don't need the active and
disabled classes.
4:58
So let's remove the active
class from the Home link and
5:01
the disabled class from the Schedule link.
5:05
So let's have a look.
5:09
If you resize the browser,
5:13
you'll see that the navbar provides
proper responsive styling out of the box.
5:15
So in the medium breakpoint range,
the navigation links collapse and we're
5:20
presented with the toggle menu, which you
can click to show and hide the nav links.
5:24
Bootstrap provides the class
navbar-brand as a class you can use for
5:32
your company, product, or project name.
5:37
So I'll update the navbar-brand's href
attribute with the link to Treehouse.
5:40
You can copy these exact snippets from
the teacher's notes of this video.
5:48
And I'll change the text
to Presented by Treehouse.
5:55
Let’s also add target_blank so
the link opens in a new tab or window.
6:02
So now I want to display the Presented
by Treehouse link to the right of
6:13
the navigation links so that it’s
flush with the right edge of the nav.
6:17
Well, since the nav uses Flexbox,
6:22
I can take advantage of the order classes
to control the visual order of the link.
6:24
So giving the navbar-brand
link the class order-1,
6:28
shifts the links to the right
of the navigation links.
6:36
The default navbar's text color is gray,
against a light gray background, but
6:41
I'd like a brighter background color.
6:46
Well, changing the colors in the navbar is
easy with the navbar theming classes and
6:47
background color utilities.
6:52
I like the white navigation links against
the dark blue background shown here.
6:54
So to apply this color
scheme to my Navbar,
6:59
I'll copy the navbar-dark and
bg-primary classes from the snippet and
7:02
replace navbar-light and
bg-light with these new classes.
7:08
And that looks a lot better.
7:16
So now the content inside the navbar
7:18
should be aligned with
the rest of the page.
7:21
Meaning, the content's left and right
margins should line up with the left and
7:23
right margins of the container below
as we see here in the mock-up.
7:29
Well, the containers
width is constrained and
7:33
doesn't stretch to fill
the full width of the page.
7:36
Again, because I want the navbar component
to stretch across the entire width
7:38
of the browser window,
I placed it outside the container.
7:43
So to align the Navigation menu and
Treehouse link with the rest of the page,
7:48
I can simply wrap the Navbar
content in a container.
7:52
So back in my code,
right below the opening nav tag,
7:57
I'll add a div with a class container and
8:02
place the closing div tag just
above the closing nav tag.
8:05
And now our navigation links
are centered on the page, good.
8:17
Next to make the Presented
by Treehouse link perfectly
8:21
flush with the right edge of the navbar,
8:26
I'll use the merge in utility class mr-0,
or margin right 0,
8:30
to remove its right margin and
that looks better.
8:35
Finally, let's make this a fixed navbar,
so
8:40
users never lose sight of the navigation.
8:43
It will always stay at
the top of the page.
8:45
Well, Bootstrap makes it easy
to fix a navbar to the top or
8:48
bottom of the viewport.
8:52
For example, you can give the navbar
component the class fixed-top.
8:53
And it will stick to
the top of the browser.
9:03
So now when I scroll down the page,
the navbar remains fixed in one spot.
9:05
Now if you notice that the fixed
positioning of the navbar covers up parts
9:10
of the headings, don't worry.
9:13
We'll fix this in the next video.
9:15
You need to sign up for Treehouse in order to download course files.
Sign up