The MyPhoto web page will consist of five separate sections: Welcome, Services, Gallery, About, and Contact Us. Each of these sections will form one distinct container. This will allow us to treat each section as a standalone component on the page.
As we want each container to take up 100% of the available horizontal space, we will begin by applying the container-fluid class. As noted in Chapter 2, Making a Style Statement, container-fluid allows its contents to be responsive across all resolutions. It achieves this by relying on the percentage width of the page, unlike the standard container class, which uses predefined horizontal breakpoints. To provide a visual cue that these are separate parts of the page, we will apply Bootstrap's contextual background classes to each section. We will also include a footer element in the page. The footer will contain miscellaneous bits of information, such as links to the site’s terms and conditions. However, for now, we will just include...