Multi-step Form (Wizard)

<div class="container py-5">
  <div class="row justify-content-center">
    <div class="col-md-8">
      <div class="p-4 border rounded-4">
        <ol class="list-unstyled d-flex justify-content-between mb-4">
          <li class="text-center">
            <div class="rounded-circle bg-primary text-white d-inline-flex align-items-center justify-content-center fw-bold" style="width:36px;height:36px">1</div>
            <div class="small mt-1 fw-semibold">Account</div>
          </li>
          <li class="text-center">
            <div class="rounded-circle bg-light border d-inline-flex align-items-center justify-content-center fw-bold" style="width:36px;height:36px">2</div>
            <div class="small mt-1 text-muted">Profile</div>
          </li>
          <li class="text-center">
            <div class="rounded-circle bg-light border d-inline-flex align-items-center justify-content-center fw-bold" style="width:36px;height:36px">3</div>
            <div class="small mt-1 text-muted">Done</div>
          </li>
        </ol>
        <h4 class="fw-bold">Create your account</h4>
        <form>
          <div class="mb-3"><label class="form-label small fw-semibold">Email</label><input type="email" class="form-control"></div>
          <div class="mb-3"><label class="form-label small fw-semibold">Password</label><input type="password" class="form-control"></div>
          <div class="d-flex justify-content-between mt-4"><button class="btn btn-outline-secondary" disabled>Back</button><button class="btn btn-primary">Next →</button></div>
        </form>
      </div>
    </div>
  </div>
</div>