Practice: Component Showcase Page

Before the final landing page, combine what you learned on one practice page: alerts, buttons, badges, progress, list group, and a card row.

Build a component showcase

Before the final landing page, combine what you learned on one practice page: alerts, buttons, badges, progress, list group, and a card row.

This practice project uses one HTML file that demonstrates many components together.

Real-life example: A showcase page is like a shop display window — every product visible so customers (or interviewers) see what you can build.

Component showcase (excerpt)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Bootstrap Showcase</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <div class="container py-4">
    <h1 class="mb-4">Bootstrap 5 Showcase</h1>

    <div class="alert alert-info">Welcome to your practice page!</div>

    <div class="mb-4">
      <button class="btn btn-primary me-2">Primary</button>
      <button class="btn btn-outline-success">Success outline</button>
      <span class="badge text-bg-danger ms-2">New</span>
    </div>

    <div class="progress mb-4" style="height: 24px;">
      <div class="progress-bar" style="width: 60%">60% complete</div>
    </div>

    <div class="row g-3">
      <div class="col-md-4">
        <div class="card h-100">
          <div class="card-body">
            <h5 class="card-title">Lesson 23</h5>
            <p class="card-text">Practice combining components.</p>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card h-100">
          <div class="card-body">
            <h5 class="card-title">Grid</h5>
            <p class="card-text">Three cards in a responsive row.</p>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <ul class="list-group">
          <li class="list-group-item active">Done</li>
          <li class="list-group-item">Forms</li>
          <li class="list-group-item">Final project next</li>
        </ul>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Editor exercise note

Open this file in VS Code with Live Server. Resize the browser narrow and wide — watch cards stack and the progress bar stay full width.

Add one dropdown and one collapse panel yourself as extra credit.

Real-life example: Resizing the browser is like folding a paper layout — you check whether the design still works when the paper is small or large.