<div class="mb-3">
<label for="inputText" class="form-label">Name</label>
<input type="text"
class="form-control" id="inputText" placeholder="Name"
/>
</div><div class="mb-3">
<label for="emailAddress" class="form-label">Email address</label>
<input
type="email"
class="form-control"
id="emailAddress"
placeholder="name@example.com"
value="name@example.com"
/>
</div><div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password" placeholder="Password" />
</div><div class="mb-3">
<label for="textarea" class="form-label">Comments</label>
<textarea
class="form-control"
rows="4"
placeholder="Leave a comment here"
id="textarea"
style="height: 6rem"
></textarea>
</div><div class="mb-3">
<label for="selectOption" class="form-label">Works with selects</label>
<select class="form-select" id="selectOption" aria-label="
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>
</div><div class="mb-3 mb-4">
<label for="InputDisabled" class="form-label">Email address</label>
<input
type="email"
class="form-control"
id="InputDisabled"
placeholder="name@example.com"
disabled
/>
</div>
<div class="mb-3 mb-5">
<label for="TextareaDisabled" class="form-label">Comments</label>
<textarea
class="form-control"
placeholder="Leave a comment here"
id="TextareaDisabled"
disabled
></textarea>
</div>
<div class="mb-3">
<label for="SelectDisabled" class="form-label">Works with selects</label>
<select
class="form-select"
id="SelectDisabled"
aria-label="
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>
</div><div class="mb-3 mb-5">
<label for="EmptyPlaintextInput" class="form-label">Empty input</label>
<input
type="email"
readonly
class="form-control"
id="EmptyPlaintextInput"
placeholder="name@example.com"
/>
</div>
<div class="mb-3 mb-3">
<label for="PlaintextInput" class="form-label">Input with value</label>
<input
type="email"
readonly
class="form-control"
id="PlaintextInput"
placeholder="name@example.com"
value="name@example.com"
/>
</div><div class="input-group mb-3">
<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="mb-3">
<label for="basic-url" class="form-label">Your vanity URL</label>
<div class="input-group">
<span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
<input type="text"
class="form-control" id="basic-url" aria-describedby="basic-addon3" />
</div>
</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="input-group mb-3">
<input type="text"
class="form-control" placeholder="Username" aria-label="Username" />
<span class="input-group-text">@</span>
<input type="text"
class="form-control" placeholder="Server" aria-label="Server" />
</div>
<div class="input-group mb-3">
<span class="input-group-text">With textarea</span>
<textarea class="form-control" aria-label="With textarea"></textarea>
</div>
<div class="input-group mb-3">
<input type="file"
class="form-control" id="inputGroupFile02" />
<label class="input-group-text" for="inputGroupFile02">Upload</label>
</div><form class="row g-3 needs-validation" novalidate>
<div class="col-md-4">
<label for="validationCustom01" class="form-label">First name</label>
<input type="text"
class="form-control" id="validationCustom01" value="Mark"
required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4">
<label for="validationCustom02" class="form-label">Last name</label>
<input type="text"
class="form-control" id="validationCustom02" value="Otto"
required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4">
<label for="validationCustomUsername" class="form-label">Username</label>
<div class="input-group has-validation">
<span class="input-group-text" id="inputGroupPrepend">@</span>
<input type="text"
class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
</div>
<div class="col-md-6">
<label for="validationCustom03" class="form-label">City</label>
<input type="text"
class="form-control" id="validationCustom03" required>
<div class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3">
<label for="validationCustom04" class="form-label">State</label>
<select class="form-select" id="validationCustom04" required>
<option selected disabled
value="">Choose...</option>
<option>...</option>
</select>
<div class="invalid-feedback">
Please select a valid state.
</div>
</div>
<div class="col-md-3">
<label for="validationCustom05" class="form-label">Zip</label>
<input type="text"
class="form-control" id="validationCustom05" required>
<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>