Introduction

This is the capstone for the module. You'll assemble a full one-page marketing site: a responsive navbar, a hero section, a grid of feature cards, and a footer — using only Bootstrap classes. Below is the complete code, followed by a small live rendering of the same layout.

Everything here is just the grid + utilities + components from lessons 2–5. No custom CSS is required.

Theory

The anatomy of a landing page

Navbar — brand on the left, links and a call-to-action button on the right; collapses on mobile.
Hero — a bold headline, a supporting paragraph, and a primary button, with generous vertical padding (py-5).
Features — a .row of cards (col-md-4) that stack on mobile and sit three-across on desktop.
Footer — a dark band with copyright text, full width.

The whole page lives inside containers so content stays centered and readable, while the navbar and footer bands stretch edge to edge.

Real World Example — Full Code

This is a complete, copy-paste landing page. Save it as landing.html and open it in a browser:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Acme — Landing</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" data-bs-theme="dark">
    <div class="container">
      <a class="navbar-brand fw-bold" href="#">Acme</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="nav">
        <ul class="navbar-nav ms-auto align-items-lg-center">
          <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
          <li class="nav-item"><a class="btn btn-primary ms-lg-2" href="#">Sign up</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Hero -->
  <header class="bg-light py-5 text-center">
    <div class="container">
      <h1 class="display-4 fw-bold">Build faster with Acme</h1>
      <p class="lead text-muted col-lg-8 mx-auto">
        A responsive starter page built entirely with Bootstrap utilities and components.
      </p>
      <a href="#" class="btn btn-primary btn-lg mt-2">Get started</a>
    </div>
  </header>

  <!-- Features -->
  <section class="container py-5">
    <div class="row g-4">
      <div class="col-12 col-md-4">
        <div class="card h-100">
          <div class="card-body">
            <h5 class="card-title">Fast</h5>
            <p class="card-text">Ship layouts in minutes with the grid and utilities.</p>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="card h-100">
          <div class="card-body">
            <h5 class="card-title">Responsive</h5>
            <p class="card-text">Mobile-first by default — looks great on every screen.</p>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-4">
        <div class="card h-100">
          <div class="card-body">
            <h5 class="card-title">Consistent</h5>
            <p class="card-text">A shared design language keeps every page on brand.</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="bg-dark text-light py-4 text-center">
    <div class="container">© 2026 Acme. Built with Bootstrap.</div>
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Live Rendered Version

The same layout rendered at a smaller scale (the navbar still collapses if you shrink your window):

Build faster with Acme

A responsive starter page built entirely with Bootstrap utilities and components.

Get started

Fast

Ship layouts in minutes with the grid and utilities.

Responsive

Mobile-first by default — looks great on every screen.

Consistent

A shared design language keeps every page on brand.

Common Mistakes

Forgetting h-100 on cards. Without it, cards in the same row can have uneven heights.
Stretching the hero text full width. Constrain it (col-lg-8 mx-auto) for readable line length.
Putting the navbar/footer inside a fixed container. Keep the band full width; only constrain the inner content with .container.
Skipping the JS bundle. The mobile navbar won't toggle without it.

Best Practices

Build mobile-first: stack everything, then add md/lg classes to spread out on larger screens.
Use spacing utilities (py-5, g-4) for rhythm instead of custom margins.
Keep one container per section so content aligns vertically down the page.
Test at multiple widths — phone, tablet, desktop — before shipping.

Practice Exercise

Copy the full code above into a new landing.html and open it.
Change the brand name, hero headline, and the three feature titles to your own product.
Add a fourth feature card and adjust the columns so they still balance (col-md-3 or col-md-6).
Resize the window from desktop to phone and confirm everything reflows cleanly.

Assignment

Extend the landing page into a two-section site:

Add a "Pricing" section below the features with three pricing cards (use the grid).
Highlight the middle plan with a colored border or bg-light and a "Most popular" badge.
Add a "Contact" modal triggered from a navbar button.
Ensure the whole page is responsive and uses no custom CSS.

Hint: reuse the card grid pattern from the features section and add a .badge bg-primary to the featured plan's title.

Interview Questions

How do you make cards in a row equal height? — Add h-100 to each card so they stretch to the tallest in the row.
How do you constrain hero text width while keeping it centered? — Use a column class plus mx-auto (e.g. col-lg-8 mx-auto).
Why keep the navbar outside the main container? — So its background spans the full viewport width while inner content stays aligned via its own .container.
What makes the layout responsive? — Mobile-first column classes (col-12 col-md-4) and responsive spacing/display utilities.
What is the minimum needed for the mobile navbar to toggle? — The Bootstrap JS bundle plus a toggler with data-bs-toggle="collapse" targeting the collapse element.

Additional Resources

getbootstrap.com/docs/5.3/examples — official starter examples to study
getbootstrap.com/docs/5.3/layout/containers — container reference
getbootstrap.com/docs/5.3/utilities/spacing — spacing rhythm for sections

Responsive Layouts (Mini-Project)