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