<div class="form-floating">
<input type="text"
class="form-control" id="inputText" placeholder="Name"
/>
<label for="inputText">Name</label>
</div><div class="form-floating">
<input type="email"
class="form-control" id="floatingInput" placeholder="name@example.com" value="name@example.com">
<label for="floatingInput">Email address</label>
</div><div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Password</label>
</div><div class="form-floating">
<textarea class="form-control" rows="4"
placeholder="Leave a comment here"
id="floatingTextarea" style="height: 6rem;"></textarea>
<label for="floatingTextarea">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 for="floatingSelect">Works with selects</label>
</div><div class="form-floating mb-4">
<input
type="email"
class="form-control"
id="floatingInputDisabled"
placeholder="name@example.com"
disabled
/>
<label for="floatingInputDisabled">Email address</label>
</div>
<div class="form-floating mb-5">
<textarea
class="form-control"
placeholder="Leave a comment here"
id="floatingTextareaDisabled"
disabled
></textarea>
<label for="floatingTextareaDisabled">Comments</label>
</div>
<div class="form-floating">
<select
class="form-select"
id="floatingSelectDisabled"
aria-label="Floating label disabled select example"
disabled
>
<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="floatingSelectDisabled">Works with selects</label>
</div><div class="form-floating mb-5">
<input
type="email"
readonly
class="form-control"
id="floatingEmptyPlaintextInput"
placeholder="name@example.com"
/>
<label for="floatingEmptyPlaintextInput">Empty input</label>
</div>
<div class="form-floating mb-3">
<input
type="email"
readonly
class="form-control"
id="floatingPlaintextInput"
placeholder="name@example.com"
value="name@example.com"
/>
<label for="floatingPlaintextInput">Input with value</label>
</div><div class="input-group mb-3">
<span class="input-group-text bg-transparent">@</span>
<div class="form-floating">
<input type="text"
class="form-control" id="floatingInputGroup1" placeholder="Username" />
<label for="floatingInputGroup1">Username</label>
</div>
</div><div class="d-flex gap-1">
<div class="form-check">
<input class="form-check-input" type="checkbox" value=""
id="flexCheckDefault" />
<label class="form-check-label" for="flexCheckDefault"> </label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value=""
id="flexCheckChecked" checked
/>
<label class="form-check-label" for="flexCheckChecked"> </label>
</div>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value=""
data-indeterminate="true"
id="checkIndeterminate"
/>
<label class="form-check-label" for="checkIndeterminate"> </label>
</div>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value=""
data-indeterminate="true"
id="flexCheckIndeterminateDisabled"
disabled
/>
<label class="form-check-label" for="flexCheckIndeterminateDisabled"> </label>
</div>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value=""
id="flexCheckDisabled"
disabled
/>
<label class="form-check-label" for="flexCheckDisabled"> </label>
</div>
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value=""
id="flexCheckCheckedDisabled"
checked
disabled
/>
<label class="form-check-label" for="flexCheckCheckedDisabled"> </label>
</div>
</div><div class="d-flex gap-1">
<div class="form-check">
<input class="form-check-input" type="radio"
name="flexRadioDefault"
id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
</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">
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio"
name="flexRadioDisabled"
id="flexRadioDisabled" disabled>
<label class="form-check-label" for="flexRadioDisabled">
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio"
name="flexRadioDisabled"
id="flexRadioCheckedDisabled" checked
disabled>
<label class="form-check-label" for="flexRadioCheckedDisabled">
</label>
</div>
</div><div class="d-flex gap-1">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch"
id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault"></label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch"
id="flexSwitchCheckChecked" checked>
<label class="form-check-label" for="flexSwitchCheckChecked"></label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch"
id="flexSwitchCheckDisabled" disabled>
<label class="form-check-label" for="flexSwitchCheckDisabled"></label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch"
id="flexSwitchCheckCheckedDisabled" checked
disabled>
<label class="form-check-label" for="flexSwitchCheckCheckedDisabled"></label>
</div>
</div><!-- Validation Form -->
<form class="row g-3 needs-validation" novalidate>
<div class="col-md-4 form-floating mb-3">
<input type="text"
class="form-control" id="validationCustom01" value="Mark"
required>
<label for="validationCustom01" class="form-label">First name</label>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4 form-floating mb-3">
<input type="text"
class="form-control" id="validationCustom02" value="Otto"
required>
<label for="validationCustom02" class="form-label">Last name</label>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4 form-floating mb-3">
<div class="input-group has-validation">
<span class="input-group-text bg-transparent">@</span>
<div class="form-floating">
<input type="text"
class="form-control" id="inputGroupPrepend"
placeholder="Username" required>
<label for="inputGroupPrepend">Username</label>
</div>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
</div>
<div class="col-md-6 form-floating">
<input type="text"
class="form-control" id="validationCustom03" required>
<label for="validationCustom03" class="form-label">City</label>
<div class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3 form-floating">
<select class="form-select" id="validationCustom04" required>
<option selected disabled
value="">Choose...</option>
<option>...</option>
</select>
<label for="validationCustom04" class="form-label">State</label>
<div class="invalid-feedback">
Please select a valid state.
</div>
</div>
<div class="col-md-3 form-floating">
<input type="text"
class="form-control" id="validationCustom05" required>
<label for="validationCustom05" class="form-label">Zip</label>
<div class="invalid-feedback">
Please provide a valid zip.
</div>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" value=""
id="invalidCheck"
required>
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">Submit form</button>
</div>
</form>