Bskin Bootstrap 5 skin ui kit
Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
Let's learn something new today!
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>
<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>
<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>
<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>
<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>
<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>
<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.