Forms Elements

Components
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-->
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>
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>
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>
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>
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>

Login

Select your color
Theme Options