-
-
-
StarCode Kh
Admin
Basic Elements
Textual Inputs
<form>
  <div class="row">
    <div class="col-lg-6">
      <div class="mb-20">
        <div class="form-floating">
          <input type="text" class="form-control" id="floatingInput1" placeholder="First Name">
          <label for="floatingInput1">First Name</label>
        </div>
      </div>
    </div>
    <div class="col-lg-6">
      <div class="mb-20">
        <div class="form-floating">
          <input type="text" class="form-control" id="floatingInput2" placeholder="Last Name">
          <label for="floatingInput2">Last Name</label>
        </div>
      </div>
    </div>
    <div class="col-lg-6">
      <div class="mb-20">
        <div class="form-floating">
          <input type="email" class="form-control" id="floatingInput3" placeholder="Email Address">
          <label for="floatingInput3">Email Address</label>
        </div>
      </div>
    </div>
    <div class="col-lg-6">
      <div class="mb-20">
        <div class="form-floating">
          <input type="text" class="form-control" id="floatingInput4" placeholder="Phone">
          <label for="floatingInput4">Phone</label>
        </div>
      </div>
    </div>
    <div class="col-lg-6">
      <div class="mb-20">
        <div class="form-floating">
          <input type="text" class="form-control" id="floatingInput5" placeholder="Address">
          <label for="floatingInput5">Address</label>
        </div>
      </div>
    </div>
    <div class="col-lg-6">
      <div class="mb-20">
        <div class="form-floating">
          <input type="text" class="form-control" id="floatingInput6" placeholder="Country">
          <label for="floatingInput6">Country</label>
        </div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="mb-20">
        <div class="form-floating">
          <select class="form-select form-control" id="floatingSelect7" aria-label="Floating label select example">
            <option selected>Select</option>
            <option value="1">New York</option>
            <option value="2">Tokyo</option>
            <option value="3">London</option>
            <option value="4">Amsterdam</option>
            <option value="5">Paris</option>
          </select>
          <label for="floatingSelect7">Town/City</label>
        </div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="mb-20">
        <div class="form-floating">
          <select class="form-select form-control" id="floatingSelect8" aria-label="Floating label select example">
            <option selected>Select</option>
            <option value="1">Washington</option>
            <option value="2">Utah</option>
            <option value="3">Nebraska</option>
            <option value="4">Florida</option>
          </select>
          <label for="floatingSelect8">State</label>
        </div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="mb-20">
        <div class="form-floating">
          <input type="text" class="form-control" id="floatingInput9" placeholder="Zip Code">
          <label for="floatingInput9">Zip Code</label>
        </div>
      </div>
    </div>
    <div class="col-lg-12">
      <div class="mb-20">
        <div class="form-floating">
          <textarea class="form-control" placeholder="Description" id="floatingTextarea10" style="height: 152px"></textarea>
          <label for="floatingTextarea10">Description</label>
        </div>
      </div>
    </div>
  </div>
</form>
Basic Form
<form>
  <div class="mb-20">
    <label class="label fs-16 mb-2">Name</label>
    <div class="form-floating">
      <input type="text" class="form-control" id="floatingInput11" placeholder="Enter name">
      <label for="floatingInput11">Name</label>
    </div>
  </div>
  <div class="mb-20">
    <label class="label fs-16 mb-2">Email Address</label>
    <div class="form-floating">
      <input type="text" class="form-control" id="floatingInput12" placeholder="Enter email address">
      <label for="floatingInput12">Email Address</label>
    </div>
  </div>
  <div class="mb-20">
    <label class="label fs-16 mb-2">Password</label>
    <div class="form-group" id="password-show-hide">
      <div class="password-wrapper position-relative password-container">
        <input type="password" class="form-control text-secondary password" placeholder="Enter password *">
        <i style="color: #A9A9C8; font-size: 22px; right: 15px !important;" class="ri-eye-off-line password-toggle-icon translate-middle-y top-50 end-0 position-absolute cursor text-secondary" aria-hidden="true"></i>
      </div>
    </div>
  </div>
  <div class="mb-20">
    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
        <label class="form-check-label fs-16" for="flexCheckDefault">
          Remember me
        </label>
      </div>
      <a href="#" class="fs-16 text-primary fw-medium text-decoration-none">Forgot Password?</a>
    </div>
  </div>
  <button type="button" class="btn btn-primary fw-normal text-white w-100 py-3">Sign In</button>
</form>
Custom Styles
<form>
  <div class="row">
    <div class="col-lg-6">
      <div class="form-group mb-4">
        <div class="form-group">
          <input type="text" class="form-control text-dark h-55 border-0 border-bottom" placeholder="Enter Name">
        </div>
      </div>
    </div>
    <div class="col-lg-6">
      <div class="form-group mb-4">
        <div class="form-group">
          <input type="email" class="form-control text-dark h-55 border-0 border-bottom" placeholder="Email Address">
        </div>
      </div>
    </div>
    <div class="col-lg-12">
      <div class="form-group mb-4">
        <div class="form-group">
          <textarea class="form-control border-0 border-bottom text-dark" placeholder="Comment Here" cols="30" rows="11"></textarea>
        </div>
      </div>
    </div>
  </div>
  <div class="text-end">
    <button type="submit" class="btn btn-primary bg-primary bg-opacity-10 text-primary border-0 fw-medium">Submit</button>
  </div>
</form>
Input Groups Buttons
<form class="src-form">
  <div class="form-group mb-4 position-relative">
    <input type="text" class="form-control h-55 bg-body-bg border-0 text-dark rounded-pill" placeholder="Search here..">
    <button type="submit" class="position-absolute top-50 end-0 translate-middle-y bg-transparent p-0 pe-3 border-0">
      <i class="ri-search-line fs-24 position-relative top-1 text-primary"></i>
    </button>
  </div>
  <div class="form-group mb-4 position-relative">
    <input type="text" class="form-control h-55 bg-body-bg border-0 text-dark rounded-pill" placeholder="Search here..">
    <button type="submit" class="position-absolute top-50 end-0 translate-middle-y bg-primary p-0 wh-40 border-0 text-center text-white rounded-circle me-2">
      <i class="ri-search-line fs-24 position-relative top-1"></i>
    </button>
  </div>
  <div class="form-group mb-4 position-relative">
    <input type="text" class="form-control h-55 bg-body-bg border-0 text-dark rounded-pill" placeholder="Search here..">
    <button type="submit" class="position-absolute top-50 end-0 translate-middle-y bg-primary p-0 border-0 text-center text-white rounded-pill px-3 py-2 me-2 fw-semibold">
      Search
    </button>
  </div>
</form>