Input simple
<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="Regular" class="form-control" > </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 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 with icon and label
<section class="py-7"> <div class="container"> <div class="row justify-space-between py-2"> <div class="col-lg-4 mx-auto"> <label>Search</label> <div class="input-group 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>