@themesberg/pixel-lite-bootstrap-ui-kit
Version:
Open-source Bootstrap 5 UI Kit
245 lines (244 loc) • 12.3 kB
HTML
<div class="section section-md pb-0">
<div class="container">
<!-- Title -->
<div class="row">
<div class="col">
<h2 class="h5">Default Forms</h2>
</div>
</div>
<!-- End of Title -->
</div>
</div>
<!-- Section -->
<div class="section section-md pt-4">
<div class="container">
<div class="row mb-4 mb-lg-5">
<div class="col-lg-4 col-sm-6">
<!-- Form -->
<div class="mb-4">
<label for="exampleInputEmail6">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail6">
<small id="emailHelp" class="form-text text-gray">We'll never share your email with anyone
else.</small>
</div>
<!-- End of Form -->
<!-- Form -->
<div class="mb-3">
<label for="exampleInputIconLeft">Icon Left</label>
<div class="input-group">
<span class="input-group-text" id="basic-addon1"><span class="fas fa-search"></span></span>
<input type="text" class="form-control" id="exampleInputIconLeft" placeholder="Search"
aria-label="Search" aria-describedby="basic-addon1">
</div>
</div>
<!-- End of Form -->
<!-- Form -->
<div class="mb-3">
<label for="exampleInputIconRight">Icon Right</label>
<div class="input-group">
<input type="text" class="form-control" id="exampleInputIconRight" placeholder="Search"
aria-label="Search" aria-describedby="basic-addon2">
<span class="input-group-text" id="basic-addon2"><span class="fas fa-search"></span></span>
</div>
</div>
<!-- End of Form -->
<!-- Form -->
<div class="mb-3">
<label for="exampleInputIconPassword">Password</label>
<div class="input-group">
<input type="password" class="form-control" id="exampleInputIconPassword" placeholder="Password"
aria-label="Password" aria-describedby="basic-addon3">
<span class="input-group-text" id="basic-addon3"><span class="fas fa-unlock-alt"></span></span>
</div>
</div>
<!-- End of Form -->
</div>
<div class="col-lg-4 col-sm-6">
<!-- Form -->
<div class="mb-3">
<label for="disabledTextInput">Name</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input"
disabled>
</div>
<div class="mb-3">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control" disabled>
<option>Disabled select</option>
</select>
</div>
<!-- End of Form -->
<!-- Form -->
<div class="mb-3">
<label class="my-1 me-2" for="inlineFormCustomSelectPref">Country</label>
<select class="form-select" id="inlineFormCustomSelectPref" 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>
<!-- End of Form -->
<!-- Form -->
<div class="mb-3">
<label for="exampleFormControlTextarea1">Example textarea</label>
<textarea class="form-control" placeholder="Enter your message..." id="exampleFormControlTextarea1"
rows="4"></textarea>
</div>
<!-- End of Form -->
</div>
<div class="col-lg-4 col-sm-6">
<!-- Form -->
<div class="mb-3">
<label for="validationServer01">First name</label>
<input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<!-- End of Form -->
<!-- Form -->
<div class="mb-4">
<label for="validationServerUsername">Username</label>
<input type="text" class="form-control is-invalid" id="validationServerUsername" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
<!-- End of Form -->
<!-- Form -->
<div class="mb-3">
<label for="formFile" class="form-label">Default file input example</label>
<input class="form-control" type="file" id="formFile">
</div>
<!-- End of Form -->
</div>
</div>
<div class="row mb-5 mb-lg-5">
<div class="col-lg-3 col-md-6">
<!-- Checkboxes -->
<div class="mb-3">
<span class="h6 fw-bold">Square Checkboxes</span>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1" checked>
<label class="form-check-label" for="defaultCheck1">
First Option
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2">
<label class="form-check-label" for="defaultCheck2">
Second Option
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck3">
<label class="form-check-label" for="defaultCheck3">
Third Option
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck4" disabled>
<label class="form-check-label" for="defaultCheck4">
Disabled checkbox
</label>
</div>
</div>
<div class="col-lg-3 col-sm-6 mt-4 mt-md-0">
<!-- Radio -->
<fieldset>
<legend class="h6">Radios</legend>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1"
value="option1" checked>
<label class="form-check-label" for="exampleRadios1">
Default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2"
value="option2">
<label class="form-check-label" for="exampleRadios2">
Second default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3"
value="option3" disabled>
<label class="form-check-label" for="exampleRadios3">
Disabled radio
</label>
</div>
<!-- End of Radio -->
</fieldset>
</div>
<div class="col-lg-3 col-sm-6 mt-4 mt-md-0">
<div class="mb-3">
<span class="h6 fw-bold">Switches</span>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Default switch input</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
<label class="form-check-label" for="flexSwitchCheckChecked">Checked switch input</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDisabled" disabled>
<label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch input</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckCheckedDisabled" checked
disabled>
<label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch
input</label>
</div>
</div>
</div>
<div class="row mb-4 mb-lg-5">
<div class="col-12 col-md-4">
<!-- Form -->
<div class="form-group">
<label class="h6" for="exampleInputDate1">Choose a date</label>
<div class="input-group mb-4">
<span class="input-group-text" id="basic-addonDate1"><span
class="fas far fa-calendar-alt"></span></span>
<input class="form-control" data-datepicker="" id="exampleInputDate1" placeholder="Select date"
type="text" aria-label="Date with icon left">
</div>
</div>
<!-- End of Form -->
</div>
<div class="col-12 col-md-8">
<!-- Form -->
<div class="row align-items-center">
<div class="col">
<label class="h6" for="exampleInputDate2">From</label>
<div class="form-group">
<div class="input-group input-group-border">
<span class="input-group-text" id="basic-addonDate2"><span
class="fas far fa-calendar-alt"></span></span>
<input class="form-control" data-datepicker="" id="exampleInputDate2"
placeholder="Start date" type="text">
</div>
</div>
</div>
<div class="col">
<div class="form-group">
<label class="h6" for="exampleInputDate3">To</label>
<div class="input-group input-group-border">
<span class="input-group-text" id="basic-addonDate3"><span
class="fas far fa-calendar-alt"></span></span>
<input class="form-control" data-datepicker="" id="exampleInputDate3"
placeholder="End date" type="text">
</div>
</div>
</div>
</div>
<!-- End of Form -->
</div>
</div>
</div>
</div>
<!-- End of Section -->