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

By Robert Buseck, Margarito Valencia, zach dubroc, Jessika Hayes, Sara Dedeaux, Justin Buseck MCA-Misslou Instructor, Jonathan Pruitt WF360 Instructor, Matthew Harris, Herbert Brown, Jordan Roland, Blake Wyatt, Jim StClair, Windie Speed, Justin Buseck, Nicole Torres Mendez BHA Instructor, WESLEY EDWARDS, and Monica Donohue

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.