You can use this lesson in your class!
Day 12: Building a Multi-Page Site with Bootstrap Components and Layout Best Practices
Completed

Day 12: Building a Multi-Page Site with Bootstrap Components and Layout Best Practices

HTML Document Structure Example

html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My Portfolio - Multi-Page Site Example</title>
  <!-- Bootstrap CSS CDN -->
  <link
    href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
    rel="stylesheet"
    integrity="sha384-MEC0iO4VgJwP/..."
    crossorigin="anonymous"
  >
  <!-- Custom CSS -->
  <link rel="stylesheet" href="custom.css">
</head>
<body>
  
  <!-- Include Navbar -->
  <div w3-include-html="navbar.html"></div>

  <!-- Page-Specific Content -->
  <div class="container mt-5">
    <h1>About Me</h1>
    <p>This is the About page content.</p>
    <!-- More content -->
  </div>

  <!-- Footer -->
  <footer class="bg-dark text-center text-white py-4">
    <p>&copy; 2025 MyPortfolio. All rights reserved.</p>
  </footer>

  <!-- Bootstrap JS and dependencies CDN -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" 
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" 
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js" 
    integrity="sha384-LtrjvnR4Twt/qOuYxD2Pz..."
    crossorigin="anonymous"></script>
  
  <!-- Include JavaScript for HTML Includes -->
  <script>
    // Simple JavaScript to include HTML files
    function includeHTML() {
      var z, i, elmnt, file, xhr;
      z = document.getElementsByTagName("*");
      for (i = 0; i < z.length; i++) {
        elmnt = z[i];
        file = elmnt.getAttribute("w3-include-html");
        if (file) {
          xhr = new XMLHttpRequest();
          xhr.onreadystatechange = function() {
            if (this.readyState == 4) {
              if (this.status == 200) {elmnt.innerHTML = this.responseText;}
              if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
              elmnt.removeAttribute("w3-include-html");
              includeHTML();
            }
          }      
          xhr.open("GET", file, true);
          xhr.send();
          return;
        }
      }
    }
    includeHTML();
  </script>
</body>
</html>

Keywords:

  • Multi-Page Site: A website consisting of multiple interconnected HTML pages, each serving different content or functions.
  • Navbar: A responsive navigation header that includes branding, navigation links, and interactive elements like dropdowns.
  • Bootstrap Grid System: A 12-column responsive grid system that allows for flexible and organized layout designs.
  • Container: Bootstrap class (.container or .container-fluid) that centers content and provides responsive margins.
  • Row: Bootstrap class (.row) used within containers to create horizontal groups of columns.
  • Column: Bootstrap classes (.col-, .col-sm-, .col-md-, .col-lg-, .col-xl-) used to define responsive column widths.
  • Form Group: Bootstrap class (.form-group) for grouping form controls and labels with proper spacing.
  • Responsive Design: Designing web content to adapt seamlessly to various screen sizes and devices.
  • Consistency: Maintaining uniform styles and layouts across different components and pages to ensure a cohesive user experience.
  • ARIA Attributes: Accessibility Rich Internet Applications attributes that enhance the accessibility of web components.

Definition Section

  1. Multi-Page Site:
    • A website architecture comprising multiple HTML pages, each dedicated to specific content or functions, interconnected through navigation links.
  2. Navbar (Navigation Bar):
    • A Bootstrap component that serves as a responsive and consistent navigation header across all pages, typically containing branding, links, and interactive elements like dropdowns.
  3. Bootstrap Grid System:
    • A responsive 12-column grid system in Bootstrap that allows developers to create flexible and organized layouts, adapting to various screen sizes.
  4. Container:
    • A Bootstrap class (.container or .container-fluid) that centers website content and provides responsive padding and margins, ensuring content is well-aligned across different devices.
  5. Row and Column:
    • .row: A Bootstrap class used to create horizontal groups of columns.
    • .col-: Bootstrap classes defining the width of columns, responsive to different screen sizes (.col-sm-4, .col-md-6, etc.).
  6. Form Group:
    • A Bootstrap class (.form-group) that wraps form controls and labels, providing proper spacing and alignment for form elements.
  7. Responsive Design:
    • An approach to web design that ensures websites render well on a variety of devices and window or screen sizes, providing an optimal user experience.
  8. ARIA Attributes:
    • Accessibility features that define roles, states, and properties to improve the accessibility of web components for users with disabilities.

Brief History of Bootstrap Multi-Page Sites and Layouts

  • Bootstrap 3 (2013):
    • Introduced a robust grid system and responsive utilities, making it easier to build multi-page sites that adapt to different devices.
    • Emphasized mobile-first design, ensuring layouts prioritized smaller screens.
  • Bootstrap 4 (2018):
    • Enhanced the grid system with more responsive breakpoints and utility classes.
    • Improved component reusability and customization, facilitating consistent design across multiple pages.
    • Introduced Flexbox-based grid system for more flexible and dynamic layouts.
  • Bootstrap 5 (2021):
    • Continued refinement of the grid system with additional utilities and improved responsiveness.
    • Enhanced accessibility features, ensuring multi-page sites built with Bootstrap are more accessible.
    • Removed jQuery dependencies, making Bootstrap components lighter and faster, which benefits multi-page site performance.

Fun Facts

  1. Flexibility with Grid System:
    • Bootstrap’s grid system allows developers to create complex and responsive layouts without writing extensive custom CSS, streamlining the development process.
  2. Consistency Across Pages:
    • Using Bootstrap components like navbars and footers consistently across all pages ensures a seamless user experience and reinforces brand identity.
  3. Responsive Utilities:
    • Bootstrap’s utility classes provide granular control over layout and styling, enabling developers to adjust components for different screen sizes effortlessly.

Practice Problems

Problem 1: Creating a Multi-Page Navbar

  1. File Name: problem11_day12.html
  2. Instructions:
    • Create two HTML files: index.html and about.html.
    • Create a navbar.html file containing a Bootstrap navbar with links to both pages.
    • Use JavaScript or server-side includes to embed navbar.html into both index.html and about.html.
    • Ensure the navbar is responsive and the active page is highlighted.
  3. Objective: Practice creating a consistent and responsive navbar across multiple pages using Bootstrap components.

Problem 2: Building a Responsive Three-Column Layout

  1. File Name: problem12_day12.html
  2. Instructions:
    • Create an HTML file with a Bootstrap grid system.
    • Implement a three-column layout that stacks vertically on small screens and displays horizontally on medium to large screens.
    • Populate each column with a Bootstrap card containing an image, title, and text.
  3. Objective: Learn to use Bootstrap’s grid system to create responsive and organized layouts.

Problem 3: Designing a Consistent Footer Across Pages

  1. File Name: problem13_day12.html
  2. Instructions:
    • Create a footer.html file with a Bootstrap-styled footer containing contact information and social media links.
    • Embed footer.html into multiple pages (index.html, about.html, etc.) using JavaScript or server-side includes.
    • Ensure the footer maintains consistent styling and positioning across all pages.
  3. Objective: Practice creating and reusing a consistent footer component across a multi-page site.

Problem 4: Implementing a Contact Form with Responsive Layout

  1. File Name: problem14_day12.html
  2. Instructions:
    • Create a contact.html page with a Bootstrap contact form.
    • Use Bootstrap’s grid system to center the form and ensure it is responsive.
    • Apply spacing and alignment utilities to enhance the form’s appearance.
  3. Objective: Understand how to design responsive and well-aligned forms using Bootstrap’s grid and utility classes.

Assignment Submission

After completing these exercises, call Mike over for feedback on your multi-page Bootstrap site, ensuring consistency and responsiveness across all pages.