Input dynamic
<section class="py-7"> <div class="container"> <div class="row justify-space-between py-2"> <div class="col-lg-4 mx-auto"> <div class="input-group input-group-dynamic"> <label class="form-label">Regular</label> <input type="text" class="form-control" > </div> </div> </div> </div> </section>
Input static
<section class="py-7"> <div class="container"> <div class="row justify-space-between py-2"> <div class="col-lg-4 mx-auto"> <div class="input-group input-group-static mb-4"> <label>First Name</label> <input class="form-control" placeholder="eg. Thomas Shelby" type="text" > </div> </div> </div> </div> </section>
<section class="py-7"> <div class="container"> <div class="row justify-space-between py-2"> <div class="col-lg-4 mx-auto"> <div class="input-group input-group-outline mb-4"> <label class="form-label">Outline</label> <input class="form-control" type="text" > </div> </div> </div> </div> </section>
Input with icon
<section class="py-7"> <div class="container"> <div class="row justify-space-between py-2"> <div class="col-lg-4 mx-auto"> <div class="input-group input-group-dynamic mb-4"> <span class="input-group-text"><i class="fas fa-search" aria-hidden="true"></i></span> <input class="form-control" placeholder="Search" type="text" > </div> </div> </div> </div> </section>
Input success
<section class="py-7"> <div class="container"> <div class="row justify-space-between py-2"> <div class="col-lg-4 mx-auto"> <input type="text" placeholder="Success" class="form-control is-valid" > </div> </div> </div> </section>
Input error
<section class="py-7"> <div class="container"> <div class="row justify-space-between py-2"> <div class="col-lg-4 mx-auto"> <input type="text" placeholder="Error" class="form-control is-invalid" > </div> </div> </div> </section>
Input disabled
<section class="py-7"> <div class="container"> <div class="row justify-space-between py-2"> <div class="col-lg-4 mx-auto"> <input type="text" placeholder="Disabled" class="form-control" disabled> </div> </div> </div> </section>