Some examples for form control styles. For more detailed examples and guidelines please visit Bootstrap docs
<div class="form-floating mb-4"> <input id="textInputExample" type="text" class="form-control" placeholder="Text Input"> <label for="textInputExample">Text Input</label> </div> <!-- /.form-floating -->
<div class="form-floating mb-4"> <textarea id="textareaExample" class="form-control" placeholder="Textarea" style="height: 150px" required></textarea> <label for="textareaExample">Textarea</label> </div> <!-- /.form-floating -->
<div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault"> <label class="form-check-label" for="flexCheckDefault"> Default checkbox </label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked> <label class="form-check-label" for="flexCheckChecked"> Checked checkbox </label> </div>
<div class="form-check"> <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1"> <label class="form-check-label" for="flexRadioDefault1"> Default radio </label> </div> <div class="form-check mb-4"> <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked> <label class="form-check-label" for="flexRadioDefault2"> Default checked radio </label> </div>
<div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="flexCheckDisabled" disabled> <label class="form-check-label" for="flexCheckDisabled"> Disabled checkbox </label> </div> <div class="form-check mb-4"> <input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioDisabled" disabled> <label class="form-check-label" for="flexRadioDisabled"> Disabled radio </label> </div>
<div class="form-select-wrapper mb-4"> <select class="form-select" aria-label="Default 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> </div>