<div class="form-floating mb-4">
  <input class="form-control form-control-lg" id="floatingInput" type="email" placeholder="name@example.com" />
  <label class="form-label" for="floatingInput">Email address</label>
</div>
<div class="form-floating">
  <input class="form-control" id="floatingPassword" type="password" placeholder="Password" />
  <label class="form-label" for="floatingPassword">Password</label>
</div>

<div class="input-group-icon"><span class="fa-solid fa-envelope text-body text-md form-control-icon-start"></span>
  <div class="form-floating mb-4"><input class="form-control" id="floatingInputIconExample" type="email" placeholder="name@example.com" /><label class="form-label" for="floatingInputIconExample">Email address</label></div>
</div>

<div class="form-floating mb-4">
  <input class="form-control is-valid" id="floatingInputValid" type="email" placeholder="name@example.com" value="test@example.com" />
  <label class="form-label" for="floatingInputValid">Valid input</label>
</div>
<div class="form-floating">
  <input class="form-control is-invalid" id="floatingInputInvalid" type="email" placeholder="name@example.com" value="test@example.com" />
  <label class="form-label" for="floatingInputInvalid">Invalid input</label>
</div>

<div class="form-floating">
  <textarea class="form-control h-25" id="floatingTextarea2" placeholder="Leave a comment here"></textarea>
  <label class="form-label" for="floatingTextarea2">Comments</label>
</div>

<div class="form-floating">
  <select class="form-select" id="floatingSelect" aria-label="Floating label select example">
    <option selected="">Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <label class="form-label" for="floatingSelect">Works with selects</label>
</div>