loading

loading....

Bskin Bootstrap 5 skin ui kit

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!

sign-in
pray

Welcome to our SKINPRO

Nice to see you! Kindly complete the form.

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

© Copyright-2022 DesignCollection.in. All rights reserved.