Overview
Jet HTML Free customizes the Bootstrap Forms
through the SASS variables in
src/sass/components/_variables.scss and adds additonal options for the form elements in src/sass/components/forms/.
Custom Form Control
Use
.form-control-solid class with .form-control to set solid background style for a form control:
<input type="text" class="form-control" placeholder="name@example.com"/>
<input type="text" class="form-control form-control-solid" placeholder="name@example.com"/>
<input type="text" class="form-control form-control-transparent" placeholder="name@example.com"/>Flush Form Control
Use
.form-control-flush class with .form-control to remove the default background-color, borders, and rounded corners of a form input.
<input type="email" class="form-control form-control-flush" placeholder="Example input"/>Form Labels
Use
.required class with .form-label or any custom element to indicate input's mandatory status:
<div class="mb-10">
<label for="exampleFormControlInput1" class="required form-label">Example</label>
<input type="email" class="form-control form-control-solid" placeholder="Example input"/>
</div>Custom Form Select
Use
.form-select-solid class with .form-select to set solid background style for a form select:
<select class="form-select" aria-label="Select example">
<option>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-select-transparent" aria-label="Select example">
<option>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-select-transparent" aria-label="Select example">
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>Custom Checkbox & Radio
>
Use
.form-check-custom and .form-check-solid class with .form-check to set custom layout with solid background style for a form check:
<div class="form-check form-check-custom form-check-solid">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault"/>
<label class="form-check-label" for="flexCheckDefault">
Default checkbox
</label>
</div>
<label class="form-check form-check-custom form-check-solid">
<input class="form-check-input" type="checkbox" value=""/>
<span class="form-check-label">
Without id linking
</span>
</label>
<div class="form-check form-check-custom form-check-solid">
<input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked="checked" />
<label class="form-check-label" for="flexCheckChecked">
Checked checkbox
</label>
</div>
<div class="form-check form-check-custom form-check-solid">
<input class="form-check-input" type="checkbox" value="" disabled id="flexCheckDisabled" />
<label class="form-check-label" for="flexCheckDisabled">
Disabled checkbox
</label>
</div>
<div class="form-check form-check-custom form-check-solid">
<input class="form-check-input" type="radio" value="" id="flexRadioDefault"/>
<label class="form-check-label" for="flexRadioDefault">
Default radio
</label>
</div>
<label class="form-check form-check-custom form-check-solid">
<input class="form-check-input" type="radio" value=""/>
<span class="form-check-label">
id="flexRadioDefault"
</span>
</label>
<div class="form-check form-check-custom form-check-solid">
<input class="form-check-input" type="radio" value="" id="flexRadioChecked" checked="checked" />
<label class="form-check-label" for="flexRadioChecked">
Checked radio
</label>
</div>
<div class="form-check form-check-custom form-check-solid">
<input class="form-check-input" type="radio" value="" disabled id="flexRadioDisabled"/>
<label class="form-check-label" for="flexRadioDisabled">
Disabled radio
</label>
</div>
Use
.form-check-{success, danger, warning} classes for checkbox and radio to change their checked states:
<div class="form-check form-check-custom form-check-success form-check-solid form-check-lg">
<input class="form-check-input" type="checkbox" value="" checked id="flexCheckboxLg"/>
<label class="form-check-label" for="flexCheckboxLg">
Success
</label>
</div>
<div class="form-check form-check-custom form-check-danger form-check-solid form-check-lg">
<input class="form-check-input" type="radio" value="" checked id="flexCheckboxSm" />
<label class="form-check-label" for="flexCheckboxSm">
Danger
</label>
</div>
<div class="form-check form-check-custom form-check-warning form-check-solid form-check-sm">
<input class="form-check-input" type="checkbox" value="" checked id="flexRadioLg"/>
<label class="form-check-label" for="flexRadioLg">
Warning
</label>
</div>
Use
.form-check-{sm, lg} fixed size classes for checkbox and radio to change their sizes:
<div class="form-check form-check-custom form-check-solid form-check-lg">
<input class="form-check-input" type="checkbox" value="" id="flexCheckboxLg"/>
<label class="form-check-label" for="flexCheckboxLg">
Large checkbox
</label>
</div>
<div class="form-check form-check-custom form-check-solid form-check-lg">
<input class="form-check-input" type="radio" value="" id="flexCheckboxSm" />
<label class="form-check-label" for="flexCheckboxSm">
Large radio
</label>
</div>
<div class="form-check form-check-custom form-check-solid form-check-sm">
<input class="form-check-input" type="checkbox" value="" id="flexRadioLg"/>
<label class="form-check-label" for="flexRadioLg">
Small checkbox
</label>
</div>
<div class="form-check form-check-custom form-check-solid form-check-sm">
<input class="form-check-input" type="radio" value="" id="flexRadioSm" />
<label class="form-check-label" for="flexRadioSm">
Small radio
</label>
</div>
Use Custom Size Classes
for checkbox and radio to set custom sizes:
<div class="form-check form-check-custom form-check-solid me-10">
<input class="form-check-input h-30px w-30px" type="checkbox" value="" id="flexCheckbox30"/>
<label class="form-check-label" for="flexCheckbox30">
40px
</label>
</div>
<div class="form-check form-check-custom form-check-solid me-10">
<input class="form-check-input h-40px w-40px" type="checkbox" value="" id="flexCheckbox40"/>
<label class="form-check-label" for="flexCheckbox40">
40px
</label>
</div>
<div class="form-check form-check-custom form-check-solid me-10">
<input class="form-check-input h-50px w-50px" type="checkbox" value="" id="flexCheckbox50"/>
<label class="form-check-label" for="flexCheckbox50">
50px
</label>
</div>
<div class="form-check form-check-custom form-check-solid me-10">
<input class="form-check-input h-30px w-30px" type="radio" value="" id="flexRadio30"/>
<label class="form-check-label" for="flexRadio30">
40px
</label>
</div>
<div class="form-check form-check-custom form-check-solid me-10">
<input class="form-check-input h-40px w-40px" type="radio" value="" id="flexRadio40"/>
<label class="form-check-label" for="flexRadio40">
40px
</label>
</div>
<div class="form-check form-check-custom form-check-solid me-10">
<input class="form-check-input h-50px w-50px" type="radio" value="" id="flexRadio50"/>
<label class="form-check-label" for="flexRadio50">
50px
</label>
</div>Custom Switch
Use
.form-check-custom and .form-check-solid class with .form-switch to set custom layout with solid background style for a form switch:
<div class="form-check form-switch form-check-custom form-check-solid">
<input class="form-check-input" type="checkbox" value="" id="flexSwitchDefault"/>
<label class="form-check-label" for="flexSwitchDefault">
Default switch
</label>
</div>
<label class="form-check form-switch form-check-custom form-check-solid">
<input class="form-check-input" type="checkbox" value=""/>
<span class="form-check-label"">
Without id linking
</span>
</label>
<div class="form-check form-switch form-check-custom form-check-solid">
<input class="form-check-input" type="checkbox" value="" id="flexSwitchChecked" checked="checked" />
<label class="form-check-label" for="flexSwitchChecked">
Checked switch
</label>
</div>
<div class="form-check form-switch form-check-custom form-check-solid">
<input class="form-check-input" type="checkbox" value="" id="flexSwitchDisabled" disabled checked="checked" />
<label class="form-check-label" for="flexSwitchDisabled">
Disabled switch
</label>
</div>
Use Custom Size Classes
for switches to set custom sizes:
<div class="form-check form-switch form-check-custom form-check-solid me-10">
<input class="form-check-input h-20px w-30px" type="checkbox" value="" id="flexSwitch20x30"/>
<label class="form-check-label" for="flexSwitch20x30">
20px x 30px
</label>
</div>
<div class="form-check form-switch form-check-custom form-check-solid me-10">
<input class="form-check-input h-30px w-50px" type="checkbox" value="" id="flexSwitch30x50"/>
<label class="form-check-label" for="flexSwitch30x50">
30px X 50px
</label>
</div>
<div class="form-check form-switch form-check-custom form-check-solid me-10">
<input class="form-check-input h-40px w-60px" type="checkbox" value="" id="flexSwitch40x60"/>
<label class="form-check-label" for="flexSwitch40x60">
40px X 60px
</label>
</div>
2024©
Keenthemes
