Base Elements
Template Elements
Template Elements
E-Commerce
Base Elements
Template Elements
Template Elements
E-Commerce
Gearing up something amazing for you…
Still waiting? Magic takes a moment! ✨
Unimart is a E-commerce Template. Worldwide electronics store since 1978.
Limited Item, checkout within 10m 00s
Subtotal (2 items)
$758.00
Shipping
$10.00
Total
$768.00
Add $248.00 More To Get Free Shipping
For orders over $9.90
For orders over $9.90
0 of 10
<!-- Text input -->
<div class="mb--16">
<label class="form-label" for="text-input">Text</label>
<input type="text" id="text-input" value="Unimart Template">
</div>
<!-- Search input -->
<div class="mb--16">
<label for="search-input" class="form-label">Search</label>
<input type="search" class="w-100" id="search-input" value="Unimart Documentation">
</div>
<!-- Email input -->
<div class="mb--16">
<label for="email-input" class="form-label">Email</label>
<input type="email" id="email-input" value="[email protected]">
</div>
<!-- URL input -->
<div class="mb--16">
<label for="url-input" class="form-label">URL</label>
<input type="url" id="url-input" value="https://html.getunimart.com/">
</div>
<!-- Phone input -->
<div class="mb--16">
<label for="tel-input" class="form-label">Phone</label>
<input type="tel" id="tel-input" value="+800 300-353-569">
</div>
<!-- Password input -->
<div class="mb--16">
<label for="pass-input" class="form-label">Password</label>
<input type="password" id="pass-input" value="doc_unimart">
</div>
<!-- Password invalid input -->
<div class="mb--16">
<label for="pass-input" class="form-label">Password</label>
<input class="form-control is-invalid" type="password" id="pass-input" value="doc_unimart">
</div>
<!-- Textarea input -->
<div class="mb--16">
<label for="textarea-input" class="form-label">Textarea</label>
<textarea id="textarea-input" rows="5">Hello Unimart Team...!!!</textarea>
</div>
<!-- Select -->
<div class="mb--16">
<label for="select-input" class="form-label">Select</label>
<select id="select-input" aria-label="Default select example">
<option selected="" disabled="">Choose option...</option>
<option value="1">Option item 1</option>
<option value="2">Option item 2</option>
<option value="3">Option item 3</option>
</select>
</div>
<!-- File input -->
<div class="mb--16">
<label for="file-input" class="form-label">File</label>
<div class="rbt-file-upload-container">
<input type="file" class="fileInput" multiple="" hidden="">
<div class="file-upload-area fileUploadArea">
<div class="file-upload-content">
<button class="browseFilesButton rbt-btn rbt-btn-sm">Browse Files</button>
</div>
<div class="fileList file-list"></div>
</div>
<p class="fileCount">0 of 10</p>
</div>
</div>
<!-- Number input -->
<div class="mb--16">
<label for="number-input" class="form-label">Number</label>
<input type="number" id="number-input" value="37">
</div>
<!-- Datalist -->
<div class="mb--16">
<label for="datalist-input" class="form-label">Datalist</label>
<input type="text" list="datalist-options" id="datalist-input" placeholder="Type to search...">
<datalist id="datalist-options">
<option value="Unimart Template"></option>
<option value="Unimart Documentation"></option>
<option value="Unimart Wordpress Themes"></option>
<option value="Unimart NextJS Template"></option>
</datalist>
</div>
<!-- Range input -->
<div class="mb--16">
<label for="range-input" class="form-label">Range</label>
<input type="range" class="form-range" id="range-input">
</div>
<!-- Color input -->
<div class="mb--16">
<label for="color-input" class="form-label">Color</label>
<input type="color" class="form-control form-control-color" id="color-input" value="#215ADA">
</div>
<!-- Basic example -->
<div class="rbt-dropdown-select filter-select rbt-modern-select search-by-category">
<select class="w-100 rbt-select-activation">
<option>United Kingdom (UK)</option>
<option>United States (US)</option>
<option>Bangladesh</option>
<option>United Arab Emirates</option>
</select>
</div>
<!-- Search example -->
<div class="rbt-dropdown-select filter-select rbt-modern-select search-by-category">
<select class="rbt-select-activation w-100" data-live-search="true" data-live-search-placeholder="Search Catagories">
<option>United Kingdom (UK)</option>
<option>United States (US)</option>
<option>Bangladesh</option>
<option>United Arab Emirates</option>
</select>
</div>
<!-- Button type example-->
<div class="rbt-dropdown-select filter-select rbt-modern-select search-by-category">
<div class="rbt-modern-select rbt-shop-view-sort-select-two ">
<select class="rbt-select-activation">
<option>Default Item</option>
<option>Item Option 2</option>
<option>Item Option 3</option>
<option>Item Option 4</option>
<option>Item Option 5</option>
</select>
</div>
</div>
<!-- Listed checkboxes -->
<!-- Unchecked -->
<div class="form-check">
<input type="checkbox" class="form-check-input" id="rbt-check-1">
<label for="rbt-check-1" class="form-check-label">Check this checkbox</label>
</div>
<!-- Checked -->
<div class="form-check">
<input type="checkbox" class="form-check-input" id="rbt-check-2" checked>
<label for="rbt-check-2" class="form-check-label">Uncheck this checkbox</label>
</div>
<!-- Disabled -->
<div class="form-check">
<input type="checkbox" class="form-check-input" id="rbt-check-3" disabled>
<label for="rbt-check-3" class="form-check-label">Disabled checkbox</label>
</div>
<!-- Checked & Disabled -->
<div class="form-check">
<input type="checkbox" class="form-check-input" id="rbt-check-4" checked disabled>
<label for="rbt-check-4" class="form-check-label">Disabled checked</label>
</div>
<!-- Listed Inline checkboxes -->
<!-- Unchecked -->
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="rbt-check-5">
<label for="rbt-check-5" class="form-check-label">Check this checkbox</label>
</div>
<!-- Checked -->
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="rbt-check-6" checked>
<label for="rbt-check-6" class="form-check-label">Uncheck this checkbox</label>
</div>
<!-- Disabled -->
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="rbt-check-7" disabled>
<label for="rbt-check-7" class="form-check-label">Disabled checkbox</label>
</div>
<!-- Checked & Disabled -->
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="rbt-check-8" checked disabled>
<label for="rbt-check-8" class="form-check-label">Disabled checked</label>
</div>
<!-- Listed radio buttons -->
<!-- Unchecked -->
<div class="form-check">
<input type="checkbox" class="form-check-input" id="rbt-radio-1" name="radio">
<label for="rbt-radio-1" class="form-check-label">Check this checkbox</label>
</div>
<!-- Checked -->
<div class="form-check">
<input type="checkbox" class="form-check-input" id="rbt-radio-2" name="radio">
<label for="rbt-radio-2" class="form-check-label">Uncheck this checkbox</label>
</div>
<!-- Disabled -->
<div class="form-check">
<input type="checkbox" class="form-check-input" id="rbt-radio-3" disabled>
<label for="rbt-radio-3" class="form-check-label">Disabled checkbox</label>
</div>
<!-- Checked & Disabled -->
<div class="form-check">
<input type="checkbox" class="form-check-input" id="rbt-radio-4" checked disabled>
<label for="rbt-radio-4" class="form-check-label">Disabled checked</label>
</div>
<!-- Listed Inline radio buttons -->
<!-- Unchecked -->
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="rbt-radio-5" name="radio">
<label for="rbt-radio-5" class="form-check-label">Check this checkbox</label>
</div>
<!-- Checked -->
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="rbt-radio-6" name="radio">
<label for="rbt-radio-6" class="form-check-label">Uncheck this checkbox</label>
</div>
<!-- Disabled -->
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="rbt-radio-7" disabled>
<label for="rbt-radio-7" class="form-check-label">Disabled checkbox</label>
</div>
<!-- Checked & Disabled -->
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="rbt-radio-8" checked disabled>
<label for="rbt-radio-8" class="form-check-label">Disabled checked</label>
</div>
<div class="rbt-price-range-slider">
<div id="rbt-slider-range" class="rbt-range-bar"></div>
<p class="rbt-range-value">
<input type="text" id="amount" readonly>
</p>
</div>
<!-- Rounded text input -->
<input type="text" class="mb--12" placeholder="Rounded shape input">
<!-- Pill text input -->
<input type="text" class="rounded-pill mb--12" placeholder="Pill shape input">
<!-- Square text input -->
<input type="text" class="rounded-0" placeholder="Square shape input">
<!-- Text input readonly -->
<div class="mb--16">
<label class="form-label">Readonly</label>
<input type="text" value="Unimart Template" readonly>
</div>
<!-- Text input disabled -->
<div class="mb--16">
<label class="form-label">Disabled Input</label>
<input class="disabled" type="text" value="Unimart Template">
</div>
<!-- Disabled select -->
<div class="mb--16">
<label class="form-label">Disabled Select</label>
<div class="rbt-dropdown-select filter-select rbt-modern-select search-by-category disabled">
<select class="w-100 rbt-select-activation">
<option>United Kingdom (UK)</option>
<option>United States (US)</option>
<option>Bangladesh</option>
<option>United Arab Emirates</option>
</select>
</div>
</div>
<div class="rbt-search-with-category uni-header-swc-one">
<form>
<div class="rbt-inner-search-field border-0">
<div class="rbt-search-input-section has-left-catagory-section rbt-inner-search-label-animate-activation">
<div class="filter-select rbt-modern-select search-by-category">
<select class="rbt-select-activation" data-live-search="true" data-live-search-placeholder="Search Catagories">
<option>All Categories</option>
<option>Fashion</option>
<option>Furniture</option>
<option>Electronics</option>
<option>Beauty</option>
</select>
</div>
<input type="text">
<span class="cd-headline clip is-full-width">
<span class="cd-words-wrapper">
<b class="is-visible">Search for something...</b>
<b class="is-hidden">Looking for something specific?</b>
<b class="is-hidden">Explore what you need...</b>
</span>
</span>
</div>
<button class="rbt-round-btn serach-btn" type="submit"><i class="fa-sharp fa-solid fa-magnifying-glass"></i></button>
</div>
</form>
</div>
<form class="needs-validation" novalidate>
<div class="row">
<div class="col-md-4 mb-3">
<label for="validationText01" class="form-label">First
name</label>
<input type="text" id="validationText01"
placeholder="First name" value="John" required>
<div class="valid-feedback">Looks good!</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationText02" class="form-label">Last
name</label>
<input type="text" id="validationText02"
placeholder="Last name" value="Doe" required>
<div class="valid-feedback">Looks good!</div>
</div>
<div class="col-md-4 mb-3">
<label for="validationTextUsername"
class="form-label">Username</label>
<input type="text"
id="validationTextUsername" placeholder="Username" required>
<div class="invalid-feedback">Please choose a username.</div>
<div class="valid-feedback">Looks good!</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label for="validationText03" class="form-label">City</label>
<select id="validationText03" required>
<option value="" selected disabled>Choose city...</option>
<option value="Dallas">Dallas</option>
<option value="Houston">Houston</option>
<option value="Los Angeles">Los Angeles</option>
<option value="Miami">Miami</option>
<option value="New York">New York</option>
</select>
<div class="invalid-feedback">Please provide a valid city.</div>
<div class="valid-feedback">Looks good!</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationText04" class="form-label">State</label>
<select id="validationText04" required>
<option value="" selected disabled>Choose state...</option>
<option value="Arizona">Arizona</option>
<option value="Colorado">Colorado</option>
<option value="Florida">Florida</option>
<option value="Indiana">Indiana</option>
<option value="Kentucky">Kentucky</option>
<option value="Texas">Texas</option>
</select>
<div class="invalid-feedback">Please provide a valid state.
</div>
<div class="valid-feedback">Looks good!</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationText05" class="form-label">Zip</label>
<input type="text" id="validationText05"
placeholder="Zip" required>
<div class="invalid-feedback">Please provide a valid zip.</div>
<div class="valid-feedback">Looks good!</div>
</div>
</div>
<div class="mb-3">
<div>
<input type="checkbox" class="form-check-input"
id="validationText06" required>
<label for="validationText06" class="form-check-label">Agree to
terms and conditions</label>
<div class="invalid-feedback">You must agree before submitting.
</div>
</div>
</div>
<button class="rbt-btn rbt-btn-sm" type="submit">Submit form</button>
</form>
<form class="row g-3 needs-validation" novalidate>
<div class="col-md-4 position-relative mb-4">
<label for="validationTooltip01" class="form-label">First
name</label>
<input type="text" id="validationTooltip01"
value="Mark" required>
<div class="valid-tooltip">
Looks good!
</div>
</div>
<div class="col-md-4 position-relative mb-4">
<label for="validationTooltip02" class="form-label">Last name</label>
<input type="text" id="validationTooltip02" value="Otto" required>
<div class="valid-tooltip">
Looks good!
</div>
</div>
<div class="col-md-4 position-relative mb-4">
<label for="validationTooltipUsername" class="form-label">Username</label>
<div class="input-group has-validation">
<input type="text"
id="validationTooltipUsername"
aria-describedby="validationTooltipUsernamePrepend"
required>
<div class="invalid-tooltip">
Please choose a unique and valid username.
</div>
</div>
</div>
<div class="col-md-6 position-relative mb-4">
<label for="validationTooltip03" class="form-label">City</label>
<input type="text" id="validationTooltip03"
required>
<div class="invalid-tooltip">
Please provide a valid city.
</div>
</div>
<div class="col-md-3 position-relative mb-4">
<label for="validationTooltip04" class="form-label">State</label>
<select id="validationTooltip04" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
<div class="invalid-tooltip">
Please select a valid state.
</div>
</div>
<div class="col-md-3 position-relative mb-4">
<label for="validationTooltip05" class="form-label">Zip</label>
<input type="text" id="validationTooltip05"
required>
<div class="invalid-tooltip">
Please provide a valid zip.
</div>
</div>
<div class="position-relative mb-4">
<div>
<input type="checkbox" class="form-check-input"
id="validationText06" required>
<label for="validationText06" class="form-check-label">Agree to terms and conditions</label>
<div class="invalid-tooltip">You must agree before submitting.
</div>
</div>
</div>
<div class="col-12">
<button class="rbt-btn rbt-btn-sm" type="submit">Submit form</button>
</div>
</form>
<form class="row g-3">
<div class="col-md-4">
<label for="validationDefault01" class="form-label">First name</label>
<input type="text" id="validationDefault01" value="Mark" required>
</div>
<div class="col-md-4">
<label for="validationDefault02" class="form-label">Last name</label>
<input type="text" id="validationDefault02" value="Otto" required>
</div>
<div class="col-md-4">
<label for="validationDefaultUsername" class="form-label">Username</label>
<div class="input-group">
<input type="text" id="validationDefaultUsername" aria-describedby="inputGroupPrepend2" required>
</div>
</div>
<div class="col-md-6">
<label for="validationDefault03" class="form-label">City</label>
<input type="text" id="validationDefault03" required>
</div>
<div class="col-md-3">
<label for="validationDefault04" class="form-label">State</label>
<select class="form-select" id="validationDefault04" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
</div>
<div class="col-md-3">
<label for="validationDefault05" class="form-label">Zip</label>
<input type="text" id="validationDefault05" required>
</div>
<div class="col-12">
<div>
<input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
<label class="form-check-label" for="invalidCheck2">
Agree to terms and conditions
</label>
</div>
</div>
<div class="col-12">
<button class="rbt-btn rbt-btn-sm" type="submit">Submit form</button>
</div>
</form>