Chapter 4. On Navigation, Footers, Alerts, and Content

In the previous chapter, we built our website's basic skeleton. Using Bootstrap's grid system, we structured our website into five distinct sections. We then styled these sections and learned how to use Bootstrap's navbar and tab system to make these sections navigable. In this chapter, we will continue adding to the knowledge obtained in Chapter 3, Building the Layout by leveraging even more Bootstrap components, adding more content and streamlining our website's design. We will begin by improving our navbar. We will first learn how to fix our navbar's position. We will then use a Bootstrap plugin (Scrollspy) to automatically update the navbar tab item appearance based on the user's navigation. Next, we will customize the website's scrolling behavior, making the transition between sections smoother.

Once we have improved our website's navigation, we will focus on improving and customizing...