Form

Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.

Form With Image

Welcome to our largest community

Let's learn something new today!

Welcome to our SKINPRO

Nice to see you! Kindly complete the form.

Email address *

Password *

      <div class="p-0 d-flex align-items-center position-relative overflow-hidden">
      <div class="container-fluid">
      <div class="row">
      <div class="col-12 col-lg-6 d-md-flex align-items-center justify-content-center  bg-linear-gradient vh-lg-100">
      <div class="p-3 p-lg-5">
      <div class="text-center">
      <h2>Welcome to our largest community</h2>
      <p class="mb-0 pt-3 fw-light">Let's learn something new today!</p>
      </div>
      <img src="images/sign-in.svg" class="img-fluid w-100" title="sign-in" alt="sign-in">
      </div>
      </div>
      <div class="col-12 col-lg-6 m-auto">
      <div class="row my-5">
      <div class="col-sm-10 col-xl-8 m-auto">
      <span class="mb-0 fs-1">
      <img src="images/pray.png" class="img-fluid mb-2" alt="pray" title="pray" width="70">
      </span>
      <h1 class="fs-2">Welcome to our <i class="fab fa-btc text-primary"></i>SKIN <span class="ps-1 text-primary">PRO</span></h1>
      <p class="lead mb-4 mt-2">Nice to see you! Kindly complete the form.</p>
      <form class="mt-5">
      <div class="mb-4">
      <label for="exampleInputEmail1" class="form-label">Email address *
      </label>
      <div class="input-group input-group-lg">
      <input type="email" class="form-control form-control-one" placeholder="Email" id="exampleInputEmail1">
      </div>
      </div>
      <div class="mb-4">
      <label for="password" class="form-label">Password *
      </label>
      <div class="input-group input-group-lg">
      <input type="password" class="form-control form-control-one" placeholder="*********" id="password">
      </div>
      </div>
      <div class="text-center pt-4">
      <button type="button" class="btn btn-primary">Submit Now</button>
      </div>
      </form>
      </div>
      </div>
      </div>
      </div>
      </div>
      </div>

With Border Radius

      <form>
      <div class="mb-5">
      <div class="input-group">
      <span class="input-group-text">
      <i class="fas fa-user"></i>
      </span>
      <input type="text" class="form-control form-control-lg" placeholder="Full Name">
      </div>
      </div>
      <div class="mb-5">
      <div class="input-group">
      <span class="input-group-text">
      <i class="fas fa-envelope"></i>
      </span>
      <input type="email" class="form-control form-control-lg" placeholder="Email Address">
      </div>
      </div>
      <div class="mb-5">
      <select class="form-select form-select-lg" aria-label="Default select example">
      <option selected="">Choose Your City</option>
      <option value="1">New York</option>
      <option value="2">USA</option>
      </select>
      </div>
      <div class="mb-5">
      <div class="input-group">
      <textarea class="form-control form-control-lg" rows="4" placeholder="Message">
      </textarea>
      </div>
      </div>
      <button type="submit" class="btn btn-primary">Send Now</button>
      </form>

Without Border Radius

         <form>
         <div class="row">
         <div class="col-xl-6 col-sm-12">
         <div class="mb-5">
         <div class="input-group">
         <input type="text" class="form-control form-control-one" placeholder="Full Name">
         </div>
         </div>
         </div>
         <div class="col-xl-6 col-sm-12">
         <div class="mb-5">
         <div class="input-group">
         <input type="email" class="form-control form-control-one" placeholder="Email Address">
         </div>
         </div>
         </div>
         <div class="col-xl-12 col-sm-12">
         <div class="mb-5">
         <div class="input-group">
         <input type="text" class="form-control form-control-one" placeholder="Mobile Number">
         </div>
         </div>
         </div>
         <div class="col-xl-12 col-sm-12">
         <div class="mb-5">
         <div class="input-group">
         <input type="text" class="form-control form-control-one" placeholder="Company">
         </div>
         </div>
         </div>
         <div class="col-xl-6 col-sm-12">
         <div class="mb-5">
         <select class="form-select form-select-one" aria-label="Default select example">
         <option selected="">Choose Your Country</option>
         <option value="1">New York</option>
         <option value="2">USA</option>
         </select>
         </div>
         </div>
         <div class="col-xl-6 col-sm-12">
         <div class="mb-5">
         <select class="form-select form-select-one" aria-label="Default select example">
         <option selected="">Choose Your City</option>
         <option value="1">Albany</option>
         <option value="2">Chicago</option>
         </select>
         </div>
         </div>
         <div class="col-xl-12 col-sm-12">
         <div class="mb-5">
         <div class="input-group">
         <textarea class="form-control form-control-lg" rows="4" placeholder="Message">
         </textarea>
         </div>
         </div>
         </div>
         <div class="col-xl-12 col-sm-12">
         <div class="text-end"">
         <button type="submit" class="btn btn-primary">Send Now</button>
         </div>
         </div>
         </div>
         </form>

Select Field with border radius

      <form>
      <div class="mb-4">
      <select class="form-select form-select-lg" aria-label="Default select example">
      <option selected="">Large Selected</option>
      <option value="1">1</option>
      <option value="2">2</option>
      </select>
      </div>
      <div class="mb-4">
      <select class="form-select" aria-label="Default select example">
      <option selected="">Default Selected</option>
      <option value="1">1</option>
      <option value="2">2</option>
      </select>
      </div>
      <div class="mb-4">
      <select class="form-select form-select-sm" aria-label="small select example">
      <option selected="">Small Selected</option>
      <option value="1">1</option>
      <option value="2">2</option>
      </select>
      </div>
      </form>

Select Field without border radius

         <form>
         <div class="mb-4">
         <select class="form-select form-select-one form-select-lg" aria-label="Default select example">
         <option selected="">Large Selected</option>
         <option value="1">1</option>
         <option value="2">2</option>
         </select>
         </div>
         <div class="mb-4">
         <select class="form-select form-select-one" aria-label="Default select example">
         <option selected="">Default Selected</option>
         <option value="1">1</option>
         <option value="2">2</option>
         </select>
         </div>
         <div class="mb-4">
         <select class="form-select form-select-one form-select-sm" aria-label="small select example">
         <option selected="">Small Selected</option>
         <option value="1">1</option>
         <option value="2">2</option>
         </select>
         </div>
         </form>

Input Field with border radius

      <form>
      <div class="mb-4">
      <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
      </div>
      <div class="mb-4">
      <input class="form-control" type="text" placeholder="Default input">
      </div>
      <div class="mb-4">
      <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
      </div>
      </form>

Input Field without border radius

         <form>
         <div class="mb-4">
         <input class="form-control form-control-one form-control-lg" type="text" placeholder=".form-control-lg">
         </div>
         <div class="mb-4">
         <input class="form-control form-control-one" type="text" placeholder="Default input">
         </div>
         <div class="mb-4">
         <input class="form-control form-control-one form-control-sm" type="text" placeholder=".form-control-sm">
         </div>
         </form>