Default Input Style

Below is the default style for form input in light and dark.

Source Code

<input type="text" class="form-control" placeholder="Enter your name">

Outline Style Input

An input style with border and transaprent background.

Source Code

<input type="text" class="form-control fc-outline" placeholder="Enter your name"><input type="text" class="form-control fc-outline-dark" placeholder="Enter your name">

Focus Border Color Variant

An input style with colored border when input is in focus.

Source Code

<input type="text" class="form-control fc-focus-success" placeholder="Enter your name"><input type="text" class="form-control fc-outline-dark fc-focus-success" placeholder="Enter your name">

Class Reference

Input Group Color Variant

An input group style with a combination of utilities classes.

Source Code

<div class="input-group">  <div class="input-group-prepend">    <span class="input-group-text bg-primary tx-white bd-primary"><i class="icon ion-person tx-16 lh-0 op-6"></i></span>  </div><!-- input-group-prepend -->  <input type="text" class="form-control bd-primary fc-focus-primary" placeholder="Username"></div>

Class Reference