Project: A Landing Page

Combine what you learned: a navbar, a hero section, three feature cards and a footer, all responsive and built only with Bootstrap classes.

Examplehtml

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="container my-3">
  <nav class="navbar navbar-expand navbar-dark bg-dark rounded px-3 mb-3">
    <a class="navbar-brand" href="#">CodeLab</a>
    <ul class="navbar-nav ms-auto"><li class="nav-item"><a class="nav-link" href="#">Features</a></li><li class="nav-item"><a class="nav-link" href="#">Pricing</a></li></ul>
  </nav>
  <header class="p-5 mb-4 bg-primary-subtle rounded-3 text-center">
    <h1 class="display-5 fw-bold">Learn to build the web</h1>
    <p class="lead">Short lessons, live examples, real skills.</p>
    <a href="#" class="btn btn-primary btn-lg">Get started</a>
  </header>
  <div class="row g-3 mb-4">
    <div class="col-md-4"><div class="card h-100"><div class="card-body"><h5 class="card-title">Practice</h5><p class="card-text">Edit code and see the result instantly.</p></div></div></div>
    <div class="col-md-4"><div class="card h-100"><div class="card-body"><h5 class="card-title">Quizzes</h5><p class="card-text">Check what you learned after each lesson.</p></div></div></div>
    <div class="col-md-4"><div class="card h-100"><div class="card-body"><h5 class="card-title">Certificates</h5><p class="card-text">Finish a course and print your certificate.</p></div></div></div>
  </div>
  <footer class="text-center text-muted border-top pt-3 small">&copy; 2026 CodeLab</footer>
</div>

Open in editor »

Try changing col-md-4 to col-md-6 and watch the cards rearrange, or switch bg-primary-subtle to another colour.

Quick check

Which class on a card makes cards in a row the same height?

.h-100.same-size.equal

Finish the quick check (and any code exercise) to complete this lesson, or mark it done yourself.

Tip: use the left and right arrow keys to move between lessons.