<div class="mb-4 mb-md-5">
    <h6 class="text-gray">Form Controls</h6>
</div>
<div class="form-group d-flex align-items-center justify-content-between">
    <label for="default" class="mr-3">Default:</label>
    <input id="default" type="text" class="form-control w-75" />
</div>
<div class="form-group d-flex align-items-center justify-content-between">
    <label for="disabled" class="mr-3">Disabled:</label>
    <input id="disabled" type="text" class="form-control w-75" disabled />
</div>
<div class="form-group has-success d-flex align-items-center justify-content-between">
    <label for="success" class="mr-3">Success:</label>
    <input id="success" type="text" class="form-control is-valid w-75" />
</div>
<div class="form-group has-danger d-flex align-items-center justify-content-between">
    <label for="error" class="mr-3">Error:</label>
    <input id="error" type="text" class="form-control is-invalid w-75" />
</div>
<div class="form-group d-flex justify-content-between mb-2">
    <label for="textarea" class="mr-3">Textarea:</label>
    <textarea id="textarea" class="form-control w-75" cols="30" rows="10"></textarea>
</div>
<div class="form-group d-flex justify-content-end mb-4">
    <div class="form-check">
        <label class="form-check-label">
            <input class="form-check-input" type="checkbox">
            <span class="form-check-x"></span>
            <span class="form-check-sign"></span>
            I agree to the terms and conditions
        </label>
    </div>
</div>
<div class="d-flex justify-content-end">
    <div class="d-flex">
        <button class="btn btn-sm mr-3 btn-primary border-dark" type="button">
            <span class="btn-text">Submit</span>
        </button>
        <button class="btn btn-sm btn-primary" type="button">
            <span class="btn-text">Cancel</span>
        </button>
    </div>
</div>