Documentation v8.1.6

Preview Downloads Purchase

Overview

Metronic 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
Video Tutorials
From guides and how-tos, to live demos and code examples to get started right away.
Metronic Downloads
Download your prefered framework and demo with one click.
What's New ?
Latest features and improvements added with our users feedback in mind.
Buy now