Project: Complete Bootstrap 5 Landing Page

Build a complete landing page using Bootstrap 5: navbar, hero section, feature cards, contact form, and footer. This combines every major topic from the course.

Final project overview

Build a complete landing page using Bootstrap 5: navbar, hero section, feature cards, contact form, and footer. This combines every major topic from the course.

Use the CDN template, mobile-first grid, and Bootstrap JS for the navbar toggler. No custom CSS required — utilities are enough.

Real-life example: The landing page is like opening your own small shop — signboard (navbar), welcome banner (hero), product shelves (cards), enquiry desk (form), and address plate (footer).

Navbar with brand + collapsible links
Hero with .display-4, .lead, and CTA button
Three feature cards in .row .col-md-4
Contact form with validation classes
Footer with copyright and links

Complete landing page code

Copy this full page, save as index.html, and customize text for your own project — portfolio, course hub, or local business.

Real-life example: Starting from a full template is like using a recipe card — change ingredients (text and colors) but keep the proven structure.

Congratulations — you finished the Bootstrap 5 course! Deploy this page to GitHub Pages or Netlify to show employers your work.

Full landing page — navbar, hero, cards, form, footer

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Rishtaara — Learn Web Dev</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <!-- Navbar -->
  <nav class="navbar navbar-expand-lg bg-dark navbar-dark fixed-top">
    <div class="container">
      <a class="navbar-brand fw-bold" href="#">Rishtaara</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="mainNav">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="#courses">Courses</a></li>
          <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Hero (replaces legacy jumbotron) -->
  <header class="bg-primary text-white text-center py-5 mt-5">
    <div class="container py-5">
      <h1 class="display-4 fw-bold">Learn Bootstrap 5</h1>
      <p class="lead col-lg-8 mx-auto">
        Master layout, components, and forms — then ship a responsive landing page like this one.
      </p>
      <a class="btn btn-light btn-lg" href="#courses">View courses</a>
    </div>
  </header>

  <!-- Feature cards -->
  <section id="courses" class="container py-5">
    <h2 class="text-center mb-4">Popular courses</h2>
    <div class="row g-4">
      <div class="col-md-4">
        <div class="card h-100 shadow-sm">
          <div class="card-body">
            <span class="badge text-bg-primary mb-2">Web</span>
            <h5 class="card-title">HTML & CSS</h5>
            <p class="card-text">Structure and style every page from zero.</p>
            <a href="#" class="btn btn-outline-primary">Start</a>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card h-100 shadow-sm">
          <div class="card-body">
            <span class="badge text-bg-success mb-2">Web</span>
            <h5 class="card-title">JavaScript</h5>
            <p class="card-text">Add interactivity and logic to your sites.</p>
            <a href="#" class="btn btn-outline-primary">Start</a>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card h-100 shadow-sm">
          <div class="card-body">
            <span class="badge text-bg-info mb-2">Web</span>
            <h5 class="card-title">Bootstrap 5</h5>
            <p class="card-text">Build pro UIs with ready-made components.</p>
            <a href="#" class="btn btn-outline-primary">Start</a>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Contact form -->
  <section id="contact" class="bg-light py-5">
    <div class="container" style="max-width: 540px;">
      <h2 class="text-center mb-4">Contact us</h2>
      <form class="needs-validation" novalidate>
        <div class="mb-3">
          <label for="contactName" class="form-label">Name</label>
          <input type="text" class="form-control" id="contactName" required />
          <div class="invalid-feedback">Please enter your name.</div>
        </div>
        <div class="mb-3">
          <label for="contactEmail" class="form-label">Email</label>
          <input type="email" class="form-control" id="contactEmail" required />
          <div class="invalid-feedback">Valid email required.</div>
        </div>
        <div class="mb-3">
          <label for="contactMsg" class="form-label">Message</label>
          <textarea class="form-control" id="contactMsg" rows="4" required></textarea>
          <div class="invalid-feedback">Please write a message.</div>
        </div>
        <button type="submit" class="btn btn-primary w-100">Send message</button>
      </form>
    </div>
  </section>

  <!-- Footer -->
  <footer class="bg-dark text-white py-4">
    <div class="container d-flex flex-column flex-md-row justify-content-between align-items-center gap-2">
      <span>&copy; 2026 Rishtaara. All rights reserved.</span>
      <div>
        <a href="#" class="text-white-50 me-3 text-decoration-none">Privacy</a>
        <a href="#" class="text-white-50 text-decoration-none">Terms</a>
      </div>
    </div>
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    document.querySelectorAll(".needs-validation").forEach((form) => {
      form.addEventListener("submit", (e) => {
        if (!form.checkValidity()) {
          e.preventDefault();
          e.stopPropagation();
        }
        form.classList.add("was-validated");
      });
    });
  </script>
</body>
</html>