[MUSIC]

Bootstrap simplifies many complex or time consuming tasks like building navigation

systems, form controls, drop down menus, and more.

For example, interactive components like drop down, alert,

and modal windows require JavaScript to work.

But Bootstrap let's you quickly create an interactive component

by simply giving an element a class, ID, or data attribute.

You don't have to write any JavaScript, because Bootstrap already provides it.

In the last section of this course,

you saw how Bootstrap greatly simplifies page layout.

CSS layout can be tricky, and

creating your own CSS grid system is time consuming.

So Bootstrap's predefined classes and grid let you focus on the higher level parts of

your project, instead of worrying about small,

repetitive tests like calculating column widths, loads, and writing media queries.

Bootstrap components let us create interactive components just as easily.

So coming up in this section, we'll press on and build out the rest of

the Full Stack Conf site using some of Bootstrap's UI components.

So let's start with a nav bar.

Click the Components link to view all the available components.

Now a good way to start using any of these components is to copy their code snippets

from the Bootstrap docs, paste them into your project,

then make changes to the HTML and CSS to customize the components.

So as you're building the site, feel free to experiment with other components to

explore the capabilities of Bootstrap.

There's one key component missing from our website, the navigation.

So let's quickly build a navigation that looks like the one in the mock-up.

Back in index.html, below the opening body tag,

I'll write a set of HTML comments for my navbar.

I want the navigation to stretch from edge to edge of the browser window.

So I'll create the navbar outside of the container, that way the navigation isn't

constrained by the position and width of the container div.

So Bootstrap comes with lots of easily customizable navigation components,

that are built using Flexbox.

For instance, you can quickly add a basic navigation to your site,

using the base nav component snippet.

So I'll copy this snippet, and paste it between my navbar comments

Then you have the option to align the nav horizontally or vertically.

Or you can quickly generate a tabbed navigation by simply

adding the class nav-tabs

You can even display pill shaped navigation links, like this,

using the class nav-pills.

Now the website mock-up shows that we should create a navigation bar containing

the navigation links on the left side, and

a link to the organizer's website on the right side.

Bootstrap has the perfect component for this, Navbar.

Navbar is a wrapper for positioning navigation, branding, and

other elements into a navigation header.

As you can see, you can even include a search field in the navbar.

So I'm going to use this nav snippet, which is similar to the regular nav we

have now, except you can use different color schemes and

it's easier to position the navigation menu.

It even collapses the navigation in the extra small to medium breakpoint range,

and displays a navbar-toggle icon to open the nav menu.

So I'll use one of these nav snippets provided here to build my navbar.

And the first one uses an unordered list to lay out the nav links.

And the second snippet works and looks exactly the same way, except that it

doesn't use a list based approach, instead it uses a div with nested anchor elements.

So I'll copy this second snippet and

replace the nav component that's in the HTML file.

Next I'll change the links to match the content in our site.

So for the home link, I'll make the href attribute #home,

then I'll replace Features with About and set its href to #about.

Below that we'll set this link to Speakers.

And the final link will be the link to the Schedule.

And we don't need the active and disabled classes.

So let's remove the active class from the Home link and

the disabled class from the Schedule link.

So let's have a look.

If you resize the browser,

you'll see that the navbar provides proper responsive styling out of the box.

So in the medium breakpoint range, the navigation links collapse and we're

presented with the toggle menu, which you can click to show and hide the nav links.

Bootstrap provides the class navbar-brand as a class you can use for

your company, product, or project name.

So I'll update the navbar-brand's href attribute with the link to Treehouse.

You can copy these exact snippets from the teacher's notes of this video.

And I'll change the text to Presented by Treehouse.

Let’s also add target_blank so the link opens in a new tab or window.

So now I want to display the Presented by Treehouse link to the right of

the navigation links so that it’s flush with the right edge of the nav.

Well, since the nav uses Flexbox,

I can take advantage of the order classes to control the visual order of the link.

So giving the navbar-brand link the class order-1,

shifts the links to the right of the navigation links.

The default navbar's text color is gray, against a light gray background, but

I'd like a brighter background color.

Well, changing the colors in the navbar is easy with the navbar theming classes and

background color utilities.

I like the white navigation links against the dark blue background shown here.

So to apply this color scheme to my Navbar,

I'll copy the navbar-dark and bg-primary classes from the snippet and

replace navbar-light and bg-light with these new classes.

And that looks a lot better.

So now the content inside the navbar

should be aligned with the rest of the page.

Meaning, the content's left and right margins should line up with the left and

right margins of the container below as we see here in the mock-up.

Well, the containers width is constrained and

doesn't stretch to fill the full width of the page.

Again, because I want the navbar component to stretch across the entire width

of the browser window, I placed it outside the container.

So to align the Navigation menu and Treehouse link with the rest of the page,

I can simply wrap the Navbar content in a container.

So back in my code, right below the opening nav tag,

I'll add a div with a class container and

place the closing div tag just above the closing nav tag.

And now our navigation links are centered on the page, good.

Next to make the Presented by Treehouse link perfectly

flush with the right edge of the navbar,

I'll use the merge in utility class mr-0, or margin right 0,

to remove its right margin and that looks better.

Finally, let's make this a fixed navbar, so

users never lose sight of the navigation.

It will always stay at the top of the page.

Well, Bootstrap makes it easy to fix a navbar to the top or

bottom of the viewport.

For example, you can give the navbar component the class fixed-top.

And it will stick to the top of the browser.

So now when I scroll down the page, the navbar remains fixed in one spot.

Now if you notice that the fixed positioning of the navbar covers up parts

of the headings, don't worry.

We'll fix this in the next video.