Documentation v1.1.0

Preview Purchase

Overview

Good customizes the Bootstrap Forms  through the SASS variables in src/sass/components/_variables.scssand adds additonal options for the form elements in src/sass/components/forms/.

Form Control

Use .form-control-solidclass with .form-controlto 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-flushclass with .form-controlto 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 .requiredclass with .form-labelor 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>

Form Select

Use .form-select-solidclass with .form-selectto 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>

Form Range

Use .form-rangeclass with .form-selectto set solid background style for a form select:
<div class="mb-10">
 <label for="customRange1" class="form-label">Example range</label>
 <input type="range" class="form-range" id="customRange1" />
</div>

<div class="mb-10">
 <label for="customRange1" class="form-label">Disabled range</label>
 <input type="range" class="form-range" id="customRange1"disabled />
</div>
Learn & Get Inspired

Support at devs.keenthemes.com

Join our developers community to find answer to your question and help others. FAQs
Get Support
Documentation
From guides and how-tos, to live demos and code examples to get started right away.
Plugins & Components
Check out our 300+ in-house components and customized 3rd-party plugins.
Layout Builder
Build your layout, preview it and export the HTML for server side integration.
What's New
Latest features and improvements added with our users feedback in mind.
Buy now