Formsv5.x

<label for="exampleFormControlInput1" class="form-label mb-0">Input Groups</label>
<div class="input-group mb-3 mt-2">
<span class="input-group-text" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username"
   aria-describedby="basic-addon2">
<span class="input-group-text" id="basic-addon2">@example.com</span>
</div>

<div class="input-group mb-3">
<span class="input-group-text">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-text">.00</span>
</div>

<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone.</div>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>

<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="">
<label for="floatingInput">Email address (floating labels)</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="">
<label for="floatingPassword">Password (floating labels)</label>
</div>

<form class="mt-4">

<div class="mb-3">
   <label for="exampleFormControlTextarea1" class="form-label">Textarea</label>
   <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>

<label for="" class="form-label mb-2">Select</label>
<select class="form-select mb-3" aria-label="Default select example">
   <option selected disabled>-- Select --</option>
   <option value="1">Cats</option>
   <option value="2">Dogs</option>
   <option value="3">Fish</option>
</select>

<label for="" class="form-label mb-2">Multi-select</label>
<select class="form-select" multiple aria-label="Multiple 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 for="customRange1" class="form-label mt-4">Range slider</label>
<input type="range" class="form-range" id="customRange1">

<label for="exampleColorInput" class="form-label">Color picker</label>
<input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c"
title="Choose your color">

<div class="form-check mt-4">
   <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
   <label class="form-check-label" for="flexCheckChecked">
      Checkbox
   </label>
</div>

<div class="form-check form-switch mb-4">
   <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
   <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox
      input</label>
</div>

<div class="form-check">
   <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
   <label class="form-check-label" for="flexRadioDefault1">
      Radio Button #1
   </label>
</div>
<div class="form-check">
   <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
   <label class="form-check-label" for="flexRadioDefault2">
      Radio Button #2
   </label>
</div>

</form>