Inputs

Input dynamic

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 input-group-dynamic">
          <label class="form-label">Regular</label>
          <input type="text" class="form-control" >
        </div>
      </div>
    </div>
  </div>
</section>

Input static

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 input-group-static mb-4">
          <label>First Name</label>
          <input class="form-control" placeholder="eg. Thomas Shelby" type="text" >
        </div>
      </div>
    </div>
  </div>
</section>

Input outline

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

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

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>