In this Task, you will practice using Navigation and Navigation Bar components.
By now, you should be getting familiar with the Bootstrap components.
Task 4.1 - First NavBar (light)
As usual, here’s the portion of the FreeCodeCamp lesson on Bootstrap NavBars.
To create your first NavBar (or, navigation bar) start with the NavBar documentation.
Note that since we have not yet imported the JavaScript part of Bootstrap, features such as collapsibility, search functionality, responsive navigation will not be available to us yet.
You’re welcome to add the Javascript if you like (see instructions here) but we will be learning more about the JavaScript part of Bootstrap later on in the course.
Here’s what you need to do for this task:
You will be doing everything in this task, in the task4.html file.
After the <h1>Task 4.1 - First NavBar (light)</h1>
create a div with the container
class applied to it, and inside the container Div, create a Bootstrap NavBar, with the links to each of this lab’s HTML files, as well as the index page.
Remember to use <a class="nav-link" href=...>
for the links, rather than the <ul>
syntax!
There should be some text that links to the current page (href="#"
) on the left of the navbar.
Here’s roughly what we’re expecting for this task (feel free to be creative and choose different colours and layouts):
Task 4.4 - Add a NavBar to the bottom of this whole page
Here’s what you need to do for this task:
Due to the presence of the large image, you can see that no matter how you scroll, the NavBar will always be “stuck” to the bottom (and cover up about 40 pixels of content).
Here’s roughly what we’re expecting for this task (feel free to be creative and choose different colours and layouts):
Task 4.5 - Add a NavBar to the bottom of this whole page
Here’s what you need to do for this task:
Using a similar idea as Task 4.4, start with the NavBar you created in Task 4.4 and apply the sticky-top
class to the NavBar so it sticks to the top.
This has an unfortunate consequence at the moment, because it covers up about 40 pixels of content from the top - there are ways to solve this, but it’s not very important at the moment.
Here’s roughly what we’re expecting for this task (feel free to be creative and choose different colours and layouts):