Splitting it up
The MyPhoto webpage consists of five sections: Welcome, Services, Gallery, About, and Contact Us. The first thing we want to do is split our page into these distinct sections.
Each section will be a distinct container, so we can practically treat each section as a standalone component on the page. We want the container to take up 100% of the available horizontal space. Therefore, we will apply the container-fluid class. As we learned earlier, container-fluid allows its contents to be responsive across all resolutions, 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, like legal information, but for now we will just include a placeholder:
...
