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, and by first learning how to fix its 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 our website's overall look and feel—that is, we will learn how to apply and customize alerts, and how to use buttons, brand images, form validation styles, and progress bars. We will also discover how to style different text elements, use media objects, and apply citations and figures.
As we progress through this chapter, we will be examining each of the aforementioned components individually. This way, we will have the chance to see how they are actually composed under the hood.
To summarize, we shall do the following in this chapter:
- Learning how to fixate our navbar
- Using the Bootstrap plugin Scrollspy to improve our website's navigation
- Using icons to customize and improve the overall design of our website
- Introducing Bootstrap alerts and customizing them
- Styling our website's footer
- Applying buttons to improve our website's overall usability
- Learning about Bootstrap's form validation styles
- Discovering Bootstrap's progress bar classes