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
<!-- Trigger button -->
<button type="button" class="rbt-btn rbt-btn-sm radius-round-6" id="liveToastBtn">Show live toast</button>
<!-- Toast inside fixed positioned container -->
<div class="toast-container position-fixed bottom-0 start-0 p-3">
<div class="toast border-danger" id="liveToast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header b1">
<i class="fa-regular fa-bell text-danger mr--8"></i>
<strong class="me-auto rbt-text-medium rbt-text-color-heading">Toast title</strong>
<small class="b4">5 mins ago</small>
<button type="button" class="btn-close ms-2 b4" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body b2">
Hello, world! This is a toast message.
</div>
</div>
</div>
<!-- Background Color Variation -->
<!-- Primary Background -->
<div class="toast fade show align-items-center rbt-bg-color-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body b2 rbt-text-color-gray-150">
Hello, world! This is a toast message.
</div>
<button class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<!-- Secondary Background -->
<div class="toast fade show align-items-center rbt-bg-color-secondary border-0" role="alert" aria-live="assertive" aria-atomic="true">
</div>
<!-- Success Background -->
<div class="toast fade show align-items-center rbt-bg-color-success border-0" role="alert" aria-live="assertive" aria-atomic="true">
</div>
<!-- Danger Background -->
<div class="toast fade show align-items-center rbt-bg-color-danger border-0" role="alert" aria-live="assertive" aria-atomic="true">
</div>
<!-- Warning Background -->
<div class="toast fade show align-items-center rbt-bg-color-warning border-0" role="alert" aria-live="assertive" aria-atomic="true">
</div>
<!-- Brand Background -->
<div class="toast fade show align-items-center rbt-bg-color-brand-700 border-0" role="alert" aria-live="assertive" aria-atomic="true">
</div>
<!-- Dark Background -->
<div class="toast fade show align-items-center rbt-bg-color-black border-0" role="alert" aria-live="assertive" aria-atomic="true">
</div>
<!-- Gray Background -->
<div class="toast fade show align-items-center rbt-bg-color-gray-300 border-0" role="alert" aria-live="assertive" aria-atomic="true">
</div>
<!-- Border Color Variation -->
<!-- Primary Border Color -->
<div class="toast fade show align-items-center rbt-border-color-primary" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body b2">
Hello, world! This is a toast message.
</div>
<button class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<!-- Secondary Border Color -->
<div class="toast fade show align-items-center border-secondary" role="alert" aria-live="assertive" aria-atomic="true">
</div>
<!-- Success Border Color -->
<div class="toast fade show align-items-center border-success" role="alert" aria-live="assertive" aria-atomic="true">
</div>
<!-- Danger Border Color -->
<div class="toast fade show align-items-center border-danger" role="alert" aria-live="assertive" aria-atomic="true">
</div>
<!-- Warning Border Color -->
<div class="toast fade show align-items-center border-warning" role="alert" aria-live="assertive" aria-atomic="true">
</div>
<!-- Info Border Color -->
<div class="toast fade show align-items-center border-info" role="alert" aria-live="assertive" aria-atomic="true">
</div>
<!-- Dark Border Color -->
<div class="toast fade show align-items-center border-dark" role="alert" aria-live="assertive" aria-atomic="true">
</div>
<!-- Background Color Variation -->
<!-- Primary Background -->
<div class="toast fade show align-items-center rbt-bg-color-primary border-0 mt--16" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body b2 rbt-text-color-gray-150">
<i class="fa-light fa-bell mr--4"></i>
Hello, world! This is a toast message.
</div>
<button class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<!-- Secondary Background -->
<div class="toast fade show align-items-center rbt-bg-color-secondary border-0 mt--16" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body b2 rbt-text-color-gray-150">
<i class="fa-light fa-bell mr--4"></i>
Hello, world! This is a toast message.
</div>
<button class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<!-- Success Background -->
<div class="toast fade show align-items-center rbt-bg-color-success border-0 mt--16" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body b2 rbt-text-color-gray-150">
<i class="fa-regular fa-octagon-check mr--4"></i>
Hello, world! This is a toast message.
</div>
<button class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<!-- Danger Background -->
<div class="toast fade show align-items-center rbt-bg-color-danger border-0 mt--16" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body b2 rbt-text-color-gray-150">
<i class="fa-sharp fa-regular fa-ban mr--4"></i>
Hello, world! This is a toast message.
</div>
<button class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<!-- Warning Background -->
<div class="toast fade show align-items-center rbt-bg-color-warning border-0 mt--16" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body b2 rbt-text-color-gray-150">
<i class="fa-regular fa-triangle-exclamation mr--4"></i>
Hello, world! This is a toast message.
</div>
<button class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<!-- Brand Background -->
<div class="toast fade show align-items-center rbt-bg-color-brand-700 border-0 mt--16" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body b2 rbt-text-color-gray-150">
<i class="fa-sharp fa-regular fa-circle-info mr--4"></i>
Hello, world! This is a toast message.
</div>
<button class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<!-- Dark Background -->
<div class="toast fade show align-items-center rbt-bg-color-black border-0 mt--16" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body b2 rbt-text-color-gray-150">
<i class="fa-sharp fa-regular fa-unlock-keyhole mr--4"></i>
Hello, world! This is a toast message.
</div>
<button class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<!-- Gray Background -->
<div class="toast fade show align-items-center rbt-bg-color-gray-300 border-0 mt--16" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body b2 rbt-text-color-gray-150">
<i class="fa-regular fa-location-dot mr--4"></i>
Hello, world! This is a toast message.
</div>
<button class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<!-- Border Color Variation -->
<!-- Primary Border Color -->
<div class="toast fade show align-items-center rbt-border-color-primary mt--16" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body b2">
<i class="fa-light fa-bell rbt-text-color-primary mr--4"></i>
Hello, world! This is a toast message.
</div>
<button class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<!-- Secondary Border Color -->
<div class="toast fade show align-items-center border-secondary mt--16" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body b2">
<i class="fa-light fa-bell rbt-text-color-gray-700 mr--4"></i>
Hello, world! This is a toast message.
</div>
<button class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<!-- Success Border Color -->
<div class="toast fade show align-items-center border-success mt--16" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body b2">
<i class="fa-regular fa-octagon-check rbt-text-color-success mr--4"></i>
Hello, world! This is a toast message.
</div>
<button class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<!-- Danger Border Color -->
<div class="toast fade show align-items-center border-danger mt--16" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body b2">
<i class="fa-sharp fa-regular fa-ban rbt-text-color-danger mr--4"></i>
Hello, world! This is a toast message.
</div>
<button class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<!-- Warning Border Color -->
<div class="toast fade show align-items-center border-warning mt--16" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body b2">
<i class="fa-regular fa-triangle-exclamation rbt-text-color-warning mr--4"></i>
Hello, world! This is a toast message.
</div>
<button class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<!-- Info Border Color -->
<div class="toast fade show align-items-center border-info mt--16" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body b2">
<i class="fa-sharp fa-regular fa-circle-info text-color-info mr--4"></i>
Hello, world! This is a toast message.
</div>
<button class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<!-- Dark Border Color -->
<div class="toast fade show align-items-center border-dark mt--16" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body b2">
<i class="fa-sharp fa-regular fa-unlock-keyhole rbt-text-color-gray-700 mr--4"></i>
Hello, world! This is a toast message.
</div>
<button class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
<!-- Primary toast -->
<div class="toast fade show rbt-border-color-primary mt--16" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header b1">
<i class="fa-regular fa-gear rbt-text-color-primary mr--8"></i>
<span class="rbt-text-color-gray-700 rbt-text-semi-bold">Primary toast</span>
<button type="button" class="btn-close ms-auto b4" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body b2">
Hello, world! This is a toast message.
</div>
</div>
<!-- Secondary toast -->
<div class="toast fade show border-secondary mt--16" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header b1">
<i class="fa-regular fa-gear text-secondary mr--8"></i>
<span class="rbt-text-color-gray-700 rbt-text-semi-bold">Secondary toast</span>
<button type="button" class="btn-close ms-auto b4" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body b2">
Hello, world! This is a toast message.
</div>
</div>
<!-- Success toast -->
<div class="toast fade show border-success mt--16" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header b1">
<i class="fa-regular fa-gear text-success mr--8"></i>
<span class="rbt-text-color-gray-700 rbt-text-semi-bold">Secondary toast</span>
<button type="button" class="btn-close ms-auto b4" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body b2">
Hello, world! This is a toast message.
</div>
</div>
<!-- Danger toast -->
<div class="toast fade show border-danger mt--16" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header b1">
<i class="fa-regular fa-gear text-danger mr--8"></i>
<span class="rbt-text-color-gray-700 rbt-text-semi-bold">Secondary toast</span>
<button type="button" class="btn-close ms-auto b4" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body b2">
Hello, world! This is a toast message.
</div>
</div>
<!-- Warning toast -->
<div class="toast fade show border-warning mt--16" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header b1">
<i class="fa-regular fa-gear text-warning mr--8"></i>
<span class="rbt-text-color-gray-700 rbt-text-semi-bold">Secondary toast</span>
<button type="button" class="btn-close ms-auto b4" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body b2">
Hello, world! This is a toast message.
</div>
</div>
<!-- Info toast -->
<div class="toast fade show border-info mt--16" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header b1">
<i class="fa-regular fa-gear text-info mr--8"></i>
<span class="rbt-text-color-gray-700 rbt-text-semi-bold">Secondary toast</span>
<button type="button" class="btn-close ms-auto b4" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body b2">
Hello, world! This is a toast message.
</div>
</div>
<!-- Dark toast -->
<div class="toast fade show border-dark mt--16" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header b1">
<i class="fa-regular fa-gear text-dark mr--8"></i>
<span class="rbt-text-color-gray-700 rbt-text-semi-bold">Secondary toast</span>
<button type="button" class="btn-close ms-auto b4" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body b2">
Hello, world! This is a toast message.
</div>
</div>
<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header b1">
<i class="fa-light fa-bell rbt-text-color-gray-700 mr--8"></i>
<span class="rbt-text-color-heading rbt-text-medium">Notification center</span>
<small class=" ms-auto">2 seconds ago</small>
</div>
<div class="toast-body b2">
You have 10 unread messages.
</div>
<div class="d-flex gap-2 align-items-center pt--8 pb--8 pr--8 pl--8">
<button type="button" class="rbt-btn rbt-btn-xs radius-round-6">Read all</button>
<button type="button" class="rbt-btn rbt-btn-xs radius-round-6 rbt-btn-secondary" data-bs-dismiss="toast">Close</button>
</div>
</div>