2. Exploring the Power of Bootstrap Grid Containers

Objective: The aim of this assignment is to solidify the students' understanding and practical skills in utilizing Bootstrap's grid system to create complex web layouts. The students will create a multi-section webpage that demonstrates the use of containers, rows, and columns within the Bootstrap framework.

Problem Statement:

Modern web design requires a deep understanding of responsive grid layouts to ensure content is displayed effectively across various devices. Students are tasked with constructing a webpage that features a variety of content sections, each with unique layout challenges that must be addressed using Bootstrap’s grid containers.

Task 1: Header and Intro Section Develop a header with a full-width background image and an introductory text section that is centered both vertically and horizontally within the header.

Expected Outcome: A header section that stretches across the full width and height of the viewport with text content that remains centered on all screen sizes.

Task 2: Featurette Section Create a three-column section to showcase the company's key features. Each column should contain an icon/image, a heading, and a paragraph of text.

Expected Outcome: A responsive featurette section with columns that stack on small screens and align side by side on larger screens, with consistent spacing between them.

Task 3: About Section with Sidebar Design an 'About Us' section that includes a main content area and a sidebar. The main content should take up two-thirds of the width, while the sidebar occupies one-third.

Expected Outcome: An 'About Us' section that maintains a two-column layout on medium to large screens and collapses into a single column on smaller screens, ensuring readability and accessibility.

Task 4: Footer with Grid Layout Craft a footer that contains three equal-width columns for contact information, social media links, and a newsletter signup form.

Expected Outcome: A footer that is responsive, with columns that are evenly distributed on larger screens and stack vertically in an organized manner on smaller screens.

Module 9 Lesson 2: Assignment | Bootstrap Layout