Problem 1: Creating a Three-Column Layout

File Name: problem1.html
Instructions:
- Create an HTML file that includes Bootstrap via CDN.
- Implement a three-column layout that stacks vertically on small screens and displays side-by-side on medium and larger screens.
- Each column should contain a heading and a paragraph.
Objective: Practice using Bootstrap’s grid system to create responsive multi-column layouts.

Problem 2: Building a Full-Width Header and Footer

File Name: problem2.html
Instructions:
- Create an HTML file with a full-width navigation bar at the top and a full-width footer at the bottom.
- The navigation bar should collapse into a hamburger menu on small screens.
- The footer should contain centered text.
Objective: Learn to implement Bootstrap’s navbar and footer within a responsive layout.

Problem 3: Designing a Responsive Image Gallery

File Name: problem3.html
Instructions:
- Create an HTML file that displays a gallery of four images.
- Use Bootstrap’s grid system to arrange the images in two columns on medium screens and four columns on large screens.
- Ensure images are responsive using the .img-fluid class.
Objective: Understand how to create a responsive image gallery using Bootstrap’s grid and utility classes.

After completing these exercises, call Mike over for feedback on your newly created Bootstrap setup and grid system implementations.

File Name: problem4.html

Instructions:

Setup Bootstrap:
- In the <head> of your HTML file, include only the Bootstrap CSS via CDN (no JS scripts needed).
Create a Form Layout:
- Within a .container, build a responsive form using Bootstrap’s grid system.
- Organize the form fields into rows and columns. For example:
  - Use a row for the name and email fields side-by-side on medium and larger screens (each using .col-md-6).
  - Add another row for a full-width message textarea (using .col-12).
  - Include a submit button that is styled with Bootstrap classes (e.g., btn btn-primary) and either spans the full width or is right-aligned.
Objective:
- Practice using Bootstrap’s grid classes to build a responsive form layout that adapts to different screen sizes without relying on any JavaScript.

File Name: problem5.html

Instructions:

Setup Bootstrap:
- Include only the Bootstrap CSS in your <head> via CDN.
Design a Landing Page:
- Create a full-width header (using a .container-fluid) that displays a prominent title and a short tagline.
- Below the header, add a section inside a .container that contains a row of Bootstrap cards.
- Use the grid system to display:
  - Three cards per row on large screens (e.g., using .col-lg-4), adjusting responsively on smaller screens.
  - Each card should include an image (use the .img-fluid class for responsiveness), a card title, and a short description.
- Add a full-width footer with centered text.
Objective:
- Build a multi-section landing page that leverages Bootstrap cards and grid classes to create a responsive layout for a portfolio or product showcase—all without using any JavaScript.

File Name: problem6.html

Instructions:

Setup Bootstrap:
- Link only the Bootstrap CSS via CDN in your <head>.
Create a Sidebar Layout:
- Build a page with two main sections:
  - A sidebar for navigation (using a simple <div> with navigation links styled with Bootstrap classes).
  - A main content area.
- Use Bootstrap’s grid system:
  - On medium and larger screens, have the sidebar occupy about 3 columns (e.g., .col-md-3) and the main content about 9 columns (e.g., .col-md-9).
  - On smaller screens, let the sidebar stack above the main content.
- The sidebar can be styled with a background color and padding for visual separation.
- Ensure the main content contains placeholder text or components to simulate a complete layout.
Objective:
- Develop a responsive, static layout that includes a sidebar navigation and a main content area. This exercise demonstrates how to integrate Bootstrap’s grid and utility classes to create a structured layout without needing Bootstrap JS for interactivity.

Day 1: Setting Up Bootstrap and Understanding the Grid System