Global modules

Before we go through all the different page types, we will see which global modules are used across more than one page type.

In the descriptions that follow, any Bootstrap 5 components being used are highlighted like this: Component name. The term module refers to a part of a page and has nothing to do with Bootstrap 5.

Header

This global module is used on all page types. It’s located at the top of each page and is being used for primary navigation. It’s been created using a Navbar component and will collapse with most of its content being hidden for breakpoints below lg.

Here are three screenshots of the module, as seen on a mobile, tablet, and desktop device:

Figure 7.2 – Header module with a closed menu on a mobile device

Figure 7.3 – Header module with a closed menu on a mobile device

Figure 7.4 – Header module on a tablet device

...