<div class="d-flex justify-content-between flex-wrap flex-md nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
  <h1 class="h2">Customer</h1>
  <div class="btn-toolbar mb-2 mb-md 0">
    <div class="btn-group me-2">
      <button class="btn btn-sm btn-outline-secondary">?</button>
    </div>
  </div>
</div>

<div class="col py-3">
  <div class="row">
    <div class="col">
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="/">Dashboard</a></li>
          <li class="breadcrumb-item active">New Customer</li>
        </ol>
      </nav>
    </div>
    <div class="col text-end fw-lighter">
      <b>UserId</b>
    </div>
  </div>

</div>


<form action="/add" method="POST">

  <div class="row form-group mb-4">
    <div class="col">
      <label for="firstName">First Name</label>
      <input type="text" class="form-control" id="firstName" name="firstName" value="" placeholder="First Name" required>
    </div>

    <div class="col">
      <label for="lastName">Last Name</label>
      <input type="text" class="form-control" id="lastName" name="lastName" value="" placeholder="Last Name" required>
    </div>
  </div>

  <div class="row form-group mb-4">
    <div class="col">
      <label for="tel">Telephone</label>
      <input type="text" class="form-control" id="tel" name="tel" value="" placeholder="Telephone" required>
    </div>

    <div class="col">
      <label for="email">Email</label>
      <input type="text" class="form-control" id="email" name="email" value="" placeholder="Email" required>
    </div>
  </div>


  <div class="form-group mb-4">
      <label for="details">Customer Details</label>
      <textarea class="form-control" name="details" id="details" cols="30" rows="12" placeholder="Customer Details"></textarea>
  </div>

  <div class="form-group mb-4">
    <button type="submit" class="btn btn-primary">Add Customer</button>
  </div>

  

</form>