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