Practical Bootstrap: Learn to Develop Responsively with One of the Most Popular CSS Frameworks

© Panos Matsinopoulos 2020

P. MatsinopoulosPractical Bootstraphttps://doi.org/10.1007/978-1-4842-6071-5_3

3. Target Project 1

Panos Matsinopoulos¹ 

(1)

KERATEA, Greece

 

In the previous chapter, you have learned about the Twitter Bootstrap grid system. In this chapter, you will develop a web page that has a navigation bar fixed at the top as seen in Figure 3-1.

Figure 3-1

Basic Template with a Top Nav Bar

This navigation bar is responsive, which means it can be equally displayed on small-display devices. In those cases, the menu is hidden behind a hamburger icon (Figure 3-2).

Figure 3-2

This Is How a Site Looks on Mobile Devices

When the user clicks the hamburger ...