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
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.
Code snippet
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
<div class="container">
<a class="navbar-brand order-1 mr-0" href="https://www.teamtreehouse.com" target="_blank">Presented by Treehouse</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#about">About</a>
<a class="nav-item nav-link" href="#speakers">Speakers</a>
<a class="nav-item nav-link" href="#schedule">Schedule</a>
</div>
</div>
</div>
</nav><!-- /navbar -->
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[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 lets 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 container's
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up