-
-
-
Olivia
Olivia John
Marketing Manager
Advanced Elements
Select Components
<div class="row">
<div class="col-lg-4">
<div class="form-group mb-4">
<label class="label text-secondary">Default Select</label>
<div class="form-group position-relative">
<select class="form-select form-control h-60" aria-label="Default select example">
<option selected class="text-dark">Value 1</option>
<option value="1" class="text-dark">Value 2</option>
<option value="2" class="text-dark">Value 3</option>
<option value="3" class="text-dark">Value 4</option>
</select>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="form-group mb-4">
<label class="label text-secondary">Multi Tags</label>
<div class="tag-container p-1 rounded-3 form-control h-auto p-0" id="tagContainer">
<input type="text" id="tagInput" class="form-control h-49 border-0" placeholder="Type and press Enter">
</div>
</div>
</div>
<div class="col-lg-4">
<div class="form-group mb-4">
<label class="label text-secondary">Taggable Select</label>
<div class="form-group position-relative">
<select class="form-select form-control h-60" aria-label="Default select example">
<option selected class="text-dark">Trezo</option>
<option value="1" class="text-dark">Seku</option>
<option value="2" class="text-dark">Adlo</option>
<option value="3" class="text-dark">Orla</option>
</select>
</div>
</div>
</div>
</div>
Custom country select input
<form>
<div class="row">
<div class="col-lg-4">
<div class="form-group mb-4">
<label class="label text-secondary">Default Select</label>
<div class="form-group position-relative">
<select class="form-select form-control h-60" aria-label="Default select example">
<option selected class="text-dark">Value 1</option>
<option value="1" class="text-dark">Value 2</option>
<option value="2" class="text-dark">Value 3</option>
<option value="3" class="text-dark">Value 4</option>
</select>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="form-group mb-4">
<label class="label text-secondary">Multi Tags</label>
<div class="col-12">
<label class="visually-hidden" for="inlineFormInputGroupUsername">Enter number</label>
<div class="input-group h-60 form-control p-0">
<div class="input-group-text rounded-3 px-3">
<img src="assets/images/united-states.jpg" alt="united-states">
<span class="ms-3 text-dark">+1</span>
</div>
<input type="number" class="form-control h-auto border-0 text-dark" id="inlineFormInputGroupUsername" placeholder="Enter number">
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="form-group mb-4">
<label class="label text-secondary">Taggable Select</label>
<div class="form-group position-relative">
<select class="form-select form-control h-60 ps-5" aria-label="Default select example">
<option selected class="text-dark">United States</option>
<option value="1" class="text-dark">United Kingdom</option>
<option value="2" class="text-dark">Germany</option>
</select>
<img src="assets/images/united-states.jpg" class="position-absolute top-50 start-0 translate-middle-y ps-3" alt="united-states">
</div>
</div>
</div>
</div>
</form>
By Date
| S | M | T | W | T | F | S |
|---|
<div class="calendar-content">
<h1 id="month-year"></h1>
<table id="calendar">
<thead>
<tr>
<th>S</th>
<th>M</th>
<th>T</th>
<th>W</th>
<th>T</th>
<th>F</th>
<th>S</th>
</tr>
</thead>
<tbody id="calendar-body"></tbody>
</table>
</div>
Custom Touch Spin
<div class="product-quantity">
<div class="add-to-cart-counter gap-2">
<button type="submit" class="minusBtn"></button>
<inputtype="text"size="25"value="1"class="count"/>
<button type="submit" class="plusBtn"></button>
</div>
</div>
<div class="product-quantity bg-e2e8f0">
<div class="add-to-cart-counter gap-2">
<button type="submit" class="minusBtn"></button>
<inputtype="text"size="25"value="1"class="count"/>
<button type="submit" class="plusBtn"></button>
</div>
</div>
(Full width) Custom Touch Spin
<div class="product-quantity w-100">
<div class="add-to-cart-counter gap-2 justify-content-between">
<button type="submit" class="minusBtn"></button>
<inputtype="text"size="25"value="1"class="count"/>
<button type="submit" class="plusBtn"></button>
</div>
</div>
<div class="product-quantity w-100 bg-e2e8f0">
<div class="add-to-cart-counter gap-2 justify-content-between">
<button type="submit" class="minusBtn"></button>
<inputtype="text"size="25"value="1"class="count"/>
<button type="submit" class="plusBtn"></button>
</div>
</div>
Custom Touch Spin Colors
<div class="product-quantity">
<div class="add-to-cart-counter gap-3 justify-content-between">
<button type="submit" class="minusBtn bg-primary text-white"></button>
<inputtype="text"size="25"value="1"class="count"/>
<button type="submit" class="plusBtn bg-primary text-white"></button>
</div>
</div>
<div class="product-quantity bg-e2e8f0">
<div class="add-to-cart-counter gap-3 justify-content-between">
<button type="submit" class="minusBtn bg-white text-primary"></button>
<inputtype="text"size="25"value="1"class="count bg-primary text-white"/>
<button type="submit" class="plusBtn bg-white text-primary"></button>
</div>
</div>
<div class="product-quantity">
<div class="add-to-cart-counter gap-3 justify-content-between">
<button type="submit" class="minusBtn bg-danger text-white"></button>
<inputtype="text"size="25"value="1"class="count border-danger"/>
<button type="submit" class="plusBtn bg-danger text-white"></button>
</div>
</div>
<div class="product-quantity">
<div class="add-to-cart-counter gap-3 justify-content-between">
<button type="submit" class="minusBtn bg-success text-white"></button>
<inputtype="text"size="25"value="1"class="count border-success"/>
<button type="submit" class="plusBtn bg-success text-white"></button>
</div>
</div>