Inputs

Input simple

Copy
<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

Copy
<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

Copy
<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

Copy
<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

Copy
<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

Copy
<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>