Form Elements
Forms
Ex.
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label class="form-label">Your Name <span class="text-danger">*</span></label>
<div class="form-icon position-relative">
<i data-feather="user" class="fea icon-sm icons"></i>
<input name="name" id="name" type="text" class="form-control ps-5" placeholder="First Name :">
</div>
</div>
</div><!--end col-->
<div class="col-md-6">
<div class="mb-3">
<label class="form-label">Your Email <span class="text-danger">*</span></label>
<div class="form-icon position-relative">
<i data-feather="mail" class="fea icon-sm icons"></i>
<input name="email" id="email" type="email" class="form-control ps-5" placeholder="Your email :">
</div>
</div>
</div><!--end col-->
<div class="col-md-12">
<div class="mb-3">
<label class="form-label">Subject</label>
<div class="form-icon position-relative">
<i data-feather="book" class="fea icon-sm icons"></i>
<input name="subject" id="subject" class="form-control ps-5" placeholder="Your subject :">
</div>
</div>
</div><!--end col-->
<div class="col-md-12">
<div class="mb-3">
<label class="form-label">Comments</label>
<div class="form-icon position-relative">
<i data-feather="message-circle" class="fea icon-sm icons"></i>
<textarea name="comments" id="comments" rows="4" class="form-control ps-5" placeholder="Your Message :"></textarea>
</div>
</div>
</div>
</div><!--end row-->
<div class="row">
<div class="col-sm-12">
<input type="submit" id="submit" name="send" class="btn btn-primary" value="Send Message">
</div><!--end col-->
</div><!--end row-->
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label class="form-label">Your Name <span class="text-danger">*</span></label>
<div class="form-icon position-relative">
<i data-feather="user" class="fea icon-sm icons"></i>
<input name="name" id="name" type="text" class="form-control ps-5" placeholder="First Name :">
</div>
</div>
</div><!--end col-->
<div class="col-md-6">
<div class="mb-3">
<label class="form-label">Your Email <span class="text-danger">*</span></label>
<div class="form-icon position-relative">
<i data-feather="mail" class="fea icon-sm icons"></i>
<input name="email" id="email" type="email" class="form-control ps-5" placeholder="Your email :">
</div>
</div>
</div><!--end col-->
<div class="col-md-12">
<div class="mb-3">
<label class="form-label">Subject</label>
<div class="form-icon position-relative">
<i data-feather="book" class="fea icon-sm icons"></i>
<input name="subject" id="subject" class="form-control ps-5" placeholder="Your subject :">
</div>
</div>
</div><!--end col-->
<div class="col-md-12">
<div class="mb-3">
<label class="form-label">Comments</label>
<div class="form-icon position-relative">
<i data-feather="message-circle" class="fea icon-sm icons"></i>
<textarea name="comments" id="comments" rows="4" class="form-control ps-5" placeholder="Your Message :"></textarea>
</div>
</div>
</div>
</div><!--end row-->
<div class="row">
<div class="col-sm-12">
<input type="submit" id="submit" name="send" class="btn btn-primary" value="Send Message">
</div><!--end col-->
</div><!--end row-->
Checkboxes
Ex.
<div class="form-check form-check-inline">
<div class="mb-0">
<div class="form-check">
<input class="form-check-input" type="checkbox" checked value="" id="flexCheckDefault1">
<label class="form-check-label" for="flexCheckDefault1">One</label>
</div>
</div>
</div>
<div class="form-check form-check-inline">
<div class="mb-0">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault2">
<label class="form-check-label" for="flexCheckDefault2">Two</label>
</div>
</div>
</div>
<div class="form-check form-check-inline">
<div class="mb-0">
<div class="form-check">
<input class="form-check-input" type="checkbox" disabled value="" id="flexCheckDefault3">
<label class="form-check-label" for="flexCheckDefault3">Disabled</label>
</div>
</div>
</div>
<div class="form-check form-check-inline">
<div class="mb-0">
<div class="form-check">
<input class="form-check-input" type="checkbox" checked value="" id="flexCheckDefault1">
<label class="form-check-label" for="flexCheckDefault1">One</label>
</div>
</div>
</div>
<div class="form-check form-check-inline">
<div class="mb-0">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault2">
<label class="form-check-label" for="flexCheckDefault2">Two</label>
</div>
</div>
</div>
<div class="form-check form-check-inline">
<div class="mb-0">
<div class="form-check">
<input class="form-check-input" type="checkbox" disabled value="" id="flexCheckDefault3">
<label class="form-check-label" for="flexCheckDefault3">Disabled</label>
</div>
</div>
</div>
Radio Buttons
Ex.
<div class="custom-control custom-radio custom-control-inline">
<div class="form-check mb-0">
<input class="form-check-input" checked type="radio" name="flexRadioDefault" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">Yes</label>
</div>
</div>
<div class="custom-control custom-radio custom-control-inline">
<div class="form-check mb-0">
<input class="form-check-input" checked type="radio" name="flexRadioDefault" id="flexRadioDefault2">
<label class="form-check-label" for="flexRadioDefault2">No</label>
</div>
</div>
<div class="custom-control custom-radio custom-control-inline">
<div class="form-check mb-0">
<input class="form-check-input" checked type="radio" disabled name="flexRadioDefault" id="flexRadioDefault3">
<label class="form-check-label" for="flexRadioDefault3">Disabled</label>
</div>
</div>
<div class="custom-control custom-radio custom-control-inline">
<div class="form-check mb-0">
<input class="form-check-input" checked type="radio" name="flexRadioDefault" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">Yes</label>
</div>
</div>
<div class="custom-control custom-radio custom-control-inline">
<div class="form-check mb-0">
<input class="form-check-input" checked type="radio" name="flexRadioDefault" id="flexRadioDefault2">
<label class="form-check-label" for="flexRadioDefault2">No</label>
</div>
</div>
<div class="custom-control custom-radio custom-control-inline">
<div class="form-check mb-0">
<input class="form-check-input" checked type="radio" disabled name="flexRadioDefault" id="flexRadioDefault3">
<label class="form-check-label" for="flexRadioDefault3">Disabled</label>
</div>
</div>
Switches Button
Ex.
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox 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 checkbox 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 checkbox 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 checkbox input</label>
</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 checkbox 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 checkbox 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 checkbox 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 checkbox input</label>
</div>
Form Select Box
Ex.
<select class="form-select form-control" 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>
<select class="form-select form-control" 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>
Subscribe Form
Ex.
<div class="subcribe-form">
<form>
<input name="email" id="email2" type="email" class="form-control rounded-pill shadow" placeholder="Your email :" required>
<button type="submit" class="btn btn-pills btn-primary">Subscribe</button>
</form><!--end form-->
</div>
<div class="subcribe-form">
<form>
<input name="email" id="email2" type="email" class="form-control rounded-pill shadow" placeholder="Your email :" required>
<button type="submit" class="btn btn-pills btn-primary">Subscribe</button>
</form><!--end form-->
</div>