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
To use full wider block layout, use the class .rbt-fullwidth-wrapper instead of .container. Here is an example for both Default Container and Full Wider layout.
<!-- Bootstrap container -->
<div class="rbt-component-area rbt-shop-filter-area rbt-bg-color-white rbt-section-gapBottom">
<div class="container">
...
</div>
</div>
<!-- Custom Container for Full Wider -->
<div class="rbt-component-area rbt-shop-filter-area rbt-bg-color-white rbt-section-gapBottom">
<div class="rbt-fullwidth-wrapper">
...
</div>
</div>
<div class="rbt-component-area rbt-shop-filter-area rbt-bg-color-white rbt-section-gapBottom">
<div class="container">
<div class="row row--12 mt_dec--12">
<div class="col-lg-12 col-md-12 col-sm-12 col-12 mt--12">
<div class="row row--12">
<div class="col-md-12">
<div class="rbt-shop-tools-wrapper rbt-shop-tools-wrapper-var-one mt--20">
<div class="rbt-shop-tool-content rbt-shop-view-var-wrapper">
<h6 class="rbt-shop-tools-title">Showing 1–20 of 45 results </h6>
<div class="rbt-shop-view-btn-list rbt-tag-list-rounded rbt-shop-view-menu">
<a href="#" class="tooltips" data-tooltip="List Style"data-tooltip-position="top"><i class="fa-regular fa-list"></i></a>
...
</div>
</div>
<div class="rbt-shop-tool-content rbt-shop-view-var-wrapper">
<h6 class="rbt-shop-tools-title">
<a href="#" class="rbt-filter-button" data-bs-toggle="collapse"
data-bs-target="#rbt-collapse-area" aria-expanded="false"
aria-controls="rbt-collapse-area">
<i class="fa-sharp fa-regular fa-filter mr--4"></i>
<span class="filter-text">Show Filter</span>
</a>
</h6>
</div>
</div>
</div>
<div class="col-12">
<div class="rbt-filter-content collapse" id="rbt-collapse-area">
<div class="rbt-component-area ptb--24">
<div class="rbt-separator rbt-separator-gray200"></div>
</div>
<div class="row row--24 mt_dec--24">
<div class="col-xxl-3 col-xl-3 col-lg-3 col-md-6 col-sm-6 col-6 mt--24">
<!-- Start Widget Area -->
<div class="rbt-single-widget rbt-widget-categories">
<div class="bt-single-widget-inner">
<h4 class="rbt-widget-title rbt-widget-title-without-border">Categories</h4>
<div class="rbt-widget-content ">
<ul class="rbt-sidebar-list-wrapper rbt-categories-list-check">
<li class="rbt-check-group">
<input id="cat-list-1" type="checkbox" name="cat-list-1">
<label for="cat-list-1">Accessories <span class="rbt-lable count">(96)</span></label>
</li>
<li class="rbt-check-group">
<input id="cat-list-2" type="checkbox" name="cat-list-2">
<label for="cat-list-2">Best seller <span class="rbt-lable count">(12)</span></label>
</li>
...
</ul>
</div>
</div>
</div>
<!-- End Widget Area -->
</div>
<div class="col-xxl-3 col-xl-3 col-lg-3 col-md-6 col-sm-6 col-6 mt--24">
<!-- Start Widget Area -->
<div class="rbt-single-widget rbt-widget-categories">
<div class="bt-single-widget-inner">
<h4 class="rbt-widget-title rbt-widget-title-without-border">
Filter by price
</h4>
<div class="rbt-widget-content">
<ul class="rbt-sidebar-list-wrapper rbt-categories-list-check">
<li class="rbt-check-group">
<input id="rbt-cat-list-fil-1" type="checkbox" name="rbt-cat-list-fil-1">
<label for="rbt-cat-list-fil-1">Under $25 <span class="rbt-lable count">(9)</span></label>
</li>
<li class="rbt-check-group">
<input id="rbt-cat-list-fil-2" type="checkbox" name="rbt-cat-list-fil-2">
<label for="rbt-cat-list-fil-2">$25 to $50 <span class="rbt-lable count">(12)</span></label>
</li>
...
</ul>
<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>
<div class="rbt-price-input-grp">
<input type="number" min="0" placeholder="$ Min">
<input type="number" min="0" placeholder="$ Max">
<a href="#" class="rbt-btn">$Go</a>
</div>
</div>
</div>
</div>
<!-- End Widget Area -->
</div>
<div class="col-xxl-3 col-xl-3 col-lg-3 col-md-6 col-sm-6 col-6 mt--24">
<!-- Start Widget Area -->
<div class="rbt-single-widget rbt-widget-categories">
<div class="bt-single-widget-inner">
<h4 class="rbt-widget-title rbt-widget-title-without-border">
Filter by color
</h4>
<div class="rbt-inner-search-field border-0 pt--16 pb--16">
<div class="rbt-search-input-section rbt-sm-search-section">
<input type="text" placeholder="Search and Select Product">
<button class="serach-btn search-btn-dark" type="submit"><i class="fa-sharp fa-solid fa-magnifying-glass"></i></button>
</div>
</div>
<div class="rbt-widget-content rbt-scroll-content">
<ul class="rbt-sidebar-list-wrapper rbt-categories-list-color-swatch">
<li class="rbt-color-swatch-group">
<a href="#" class="rbt-color-swatch-content">
<span class="rbt-color-swatch">
<span
class="rbt-color-swatch-bg rbt-swatch-bg-black"></span>
<span class="rbt-color-swatch-text">Black</span>
</span>
</a>
<span class="rbt-color-swatch-count">(33)</span>
</li>
<li class="rbt-color-swatch-group">
<a href="#" class="rbt-color-swatch-content active">
<span class="rbt-color-swatch">
<span
class="rbt-color-swatch-bg rbt-swatch-bg-blue"></span>
<span class="rbt-color-swatch-text">Blue</span>
</span>
</a>
<span class="rbt-color-swatch-count">(56)</span>
</li>
...
</ul>
</div>
</div>
</div>
<!-- End Widget Area -->
</div>
<div class="col-xxl-3 col-xl-3 col-lg-3 col-md-6 col-sm-6 col-6 mt--24">
<!-- Start Widget Area -->
<div class="rbt-single-widget rbt-widget-categories">
<div class="bt-single-widget-inner">
<h4 class="rbt-widget-title rbt-widget-title-without-border">Brand</h4>
<div class="rbt-widget-content">
<ul
class="rbt-sidebar-list-wrapper rbt-categories-list-check rbt-categories-brand-list-check">
<li class="rbt-check-group">
<input id="rbt-cat-list-brand-radio-1" type="radio"
name="rbt-cat-list-brand-radio">
<label for="rbt-cat-list-brand-radio-1">
<span class="rbt-lable-content">
<span class="rbt-lable-img"><img src="..." alt="Catagory Image"></span>
<span class="rbt-lable-text">Acme</span>
</span>
<span class="rbt-lable-count">(96)</span>
</label>
</li>
<li class="rbt-check-group">
<input id="rbt-cat-list-brand-radio-2" type="radio"
name="rbt-cat-list-brand-radio">
<label for="rbt-cat-list-brand-radio-2">
<span class="rbt-lable-content">
<span class="rbt-lable-img"><img src="..." alt="Catagory Image"></span>
<span class="rbt-lable-text">Aurarts</span>
</span>
<span class="rbt-lable-count">(12)</span>
</label>
</li>
</ul>
</div>
</div>
</div>
<!-- End Widget Area -->
</div>
</div>
</div>
</div>
</div>
<!-- Start Card Area -->
<div class="row row--12">
<!-- Single Card -->
<div class="col-xxl-3 col-xl-4 col-lg-4 col-md-6 col-sm-6 col-6 mt--24">
product card...
</div>
...
</div>
<!-- End Card Area -->
<div class="row mt--40 mt_sm--12">
<div class="col-12">
pagination...
</div>
</div>
</div>
</div>
</div>
</div>
<div class="rbt-component-area rbt-shop-filter-area rbt-bg-color-gray-light rbt-section-gapBottom">
<div class="container">
<div class="row row--12 mt_dec--12">
<div class="col-lg-12 col-md-12 col-sm-12 col-12 mt--12">
<div class="row row--12">
<div class="col-md-12">
<div class="rbt-shop-tools-wrapper rbt-shop-tools-wrapper-var-one mt--20">
<div class="rbt-shop-tool-content rbt-shop-view-var-wrapper">
<h6 class="rbt-shop-tools-title">
<a href="#" class="rbt-filter-button rbt-filter-activation">
<i class="fa-sharp fa-regular fa-filter mr--4"></i>
<span class="filter-text">Show Filter</span>
</a>
</h6>
</div>
<div class="rbt-shop-tool-content rbt-shop-view-var-wrapper">
<div class="rbt-inner-search-field style-one rbt-search-field-rounded">
<input type="text" placeholder="Search for products">
<button class="rbt-round-btn serach-btn" type="submit"><i class="fa-solid fa-magnifying-glass"></i></button>
</div>
</div>
</div>
</div>
</div>
<div class="rbt-filterproduct-row d-flex position-relative">
<!-- Filter sidebar -->
<div class="rbt-filter-content rbt-filter-content-horizontal rbt-filter-collapse-area">
<div class="inner pr--24">
<div class="rbt-single-widget rbt-widget-categories mt--24">
<div class="bt-single-widget-inner">
<h4 class="rbt-widget-title rbt-widget-title-without-border">
Categories
</h4>
<div class="rbt-widget-content ">
<ul class="rbt-sidebar-list-wrapper rbt-categories-list-check">
<li class="rbt-check-group">
<input id="cat-list-1" type="checkbox" name="cat-list-1">
<label for="cat-list-1">Accessories <span
class="rbt-lable count">(96)</span></label>
</li>
<li class="rbt-check-group">
<input id="cat-list-2" type="checkbox" name="cat-list-2">
<label for="cat-list-2">Best seller <span
class="rbt-lable count">(12)</span></label>
</li>
...
</ul>
</div>
</div>
</div>
<div class="rbt-single-widget rbt-widget-categories mt--24">
<div class="bt-single-widget-inner">
<h4 class="rbt-widget-title rbt-widget-title-without-border">
Filter by price
</h4>
<div class="rbt-widget-content">
<ul class="rbt-sidebar-list-wrapper rbt-categories-list-check">
<li class="rbt-check-group">
<input id="rbt-cat-list-fil-1" type="checkbox"
name="rbt-cat-list-fil-1">
<label for="rbt-cat-list-fil-1">Under $25 <span
class="rbt-lable count">(9)</span></label>
</li>
<li class="rbt-check-group">
<input id="rbt-cat-list-fil-2" type="checkbox"
name="rbt-cat-list-fil-2">
<label for="rbt-cat-list-fil-2">$25 to $50 <span
class="rbt-lable count">(12)</span></label>
</li>
...
</ul>
<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>
<div class="rbt-price-input-grp">
<input type="number" min="0" placeholder="$ Min">
<input type="number" min="0" placeholder="$ Max">
<a href="#" class="rbt-btn">$Go</a>
</div>
</div>
</div>
</div>
<div class="rbt-single-widget rbt-widget-categories mt--24">
<div class="bt-single-widget-inner">
<h4 class="rbt-widget-title rbt-widget-title-without-border pb--0">
Filter by color
</h4>
<div class="rbt-inner-search-field border-0 pt--16 pb--16">
<div class="rbt-search-input-section rbt-sm-search-section">
<input type="text" placeholder="Search and Select Product">
<button class="serach-btn search-btn-dark" type="submit"><i
class="fa-sharp fa-solid fa-magnifying-glass"></i></button>
</div>
</div>
<div class="rbt-widget-content rbt-scroll-content">
<ul class="rbt-sidebar-list-wrapper rbt-categories-list-color-swatch">
<li class="rbt-color-swatch-group">
<a href="#" class="rbt-color-swatch-content">
<span class="rbt-color-swatch">
<span class="rbt-color-swatch-bg rbt-swatch-bg-black"></span>
<span class="rbt-color-swatch-text">Black</span>
</span>
</a>
<span class="rbt-color-swatch-count">(33)</span>
</li>
<li class="rbt-color-swatch-group">
<a href="#" class="rbt-color-swatch-content active">
<span class="rbt-color-swatch">
<span class="rbt-color-swatch-bg rbt-swatch-bg-blue"></span>
<span class="rbt-color-swatch-text">Blue</span>
</span>
</a>
<span class="rbt-color-swatch-count">(56)</span>
</li>
...
</ul>
</div>
</div>
</div>
<div class="rbt-single-widget rbt-widget-categories mt--24">
<div class="bt-single-widget-inner">
<h4 class="rbt-widget-title rbt-widget-title-without-border">
Brand
</h4>
<div class="rbt-widget-content">
<ul
class="rbt-sidebar-list-wrapper rbt-categories-list-check rbt-categories-brand-list-check">
<li class="rbt-check-group">
<input id="rbt-cat-list-brand-radio-1" type="radio"
name="rbt-cat-list-brand-radio">
<label for="rbt-cat-list-brand-radio-1">
<span class="rbt-lable-content">
<span class="rbt-lable-img"><img src="..." alt="Catagory Image"></span>
<span class="rbt-lable-text">Acme</span>
</span>
<span class="rbt-lable-count">(96)</span>
</label>
</li>
<li class="rbt-check-group">
<input id="rbt-cat-list-brand-radio-2" type="radio"
name="rbt-cat-list-brand-radio">
<label for="rbt-cat-list-brand-radio-2">
<span class="rbt-lable-content">
<span class="rbt-lable-img"><img src="..." alt="Catagory Image"></span>
<span class="rbt-lable-text">Aurarts</span>
</span>
<span class="rbt-lable-count">(12)</span>
</label>
</li>
...
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- Card Area -->
<div class="rbt-card-wrapper rbt-collapsible-filter-product-area">
<div class="row row--12">
<!-- Single Card -->
<div class="col-xxl-4 col-xl-6 col-lg-6 col-md-6 col-sm-6 col-6 mt--24">
product card...
</div>
<!-- Single Card -->
<div class="col-xxl-4 col-xl-6 col-lg-6 col-md-6 col-sm-6 col-6 mt--24">
product card...
</div>
...
</div>
</div>
</div>
<div class="row mt--40 mt_sm--12">
<div class="col-12">
pagination
</div>
</div>
</div>
</div>
</div>
</div>
<div class="rbt-component-area rbt-shop-filter-area rbt-bg-color-white rbt-section-gapBottom">
<div class="container">
<div class="row row--12 mt_dec--12">
<div class="col-lg-12 col-md-12 col-sm-12 col-12 mt--12">
<div class="row row--12">
<div class="col-md-12">
<div class="rbt-shop-tools-wrapper rbt-shop-tools-wrapper-var-one mt--20">
<div class="rbt-shop-tool-content rbt-shop-view-var-wrapper">
<h6 class="rbt-shop-tools-title">Showing 1–20 of 45 results </h6>
<div class="rbt-shop-view-btn-list rbt-tag-list-rounded rbt-shop-view-menu">
<a href="#" class="tooltips" data-tooltip="List Style" data-tooltip-position="top"><i class="fa-regular fa-list"></i></a>
<a href="#" class="tooltips" data-tooltip="Two Column" data-tooltip-position="top"><i class="fa-regular fa-grid-2"></i></a>
<a class="active tooltips" href="#" data-tooltip="Three Column" data-tooltip-position="top"><i class="fa-sharp fa-light fa-grid"></i></a>
<a href="#" class="tooltips" data-tooltip="Four Column" data-tooltip-position="top"><i class="fa-sharp fa-light fa-grid-4"></i></a>
</div>
</div>
<div class="rbt-shop-tool-content rbt-shop-view-var-wrapper">
<div class="rbt-inner-search-field style-one rbt-search-field-rounded">
<input type="text" placeholder="Search for products">
<button class="rbt-round-btn serach-btn" type="submit"><i class="fa-solid fa-magnifying-glass"></i></button>
</div>
</div>
<div class="rbt-shop-tool-content rbt-shop-view-var-wrapper">
<h6 class="rbt-shop-tools-title">
<a href="#" class="rbt-filter-button rbt-filter-activation">
<i class="fa-sharp fa-regular fa-filter mr--4"></i>
<span class="filter-text">Show Filter</span>
</a>
</h6>
</div>
</div>
</div>
</div>
<div class="rbt-filterproduct-row d-flex position-relative">
<div class="rbt-card-wrapper rbt-collapsible-filter-product-area">
<div class="row row--12">
<!-- Single Card -->
<div class="col-xxl-4 col-xl-6 col-lg-6 col-md-6 col-sm-6 col-6 mt--24">
product card...
</div>
<div class="col-xxl-4 col-xl-6 col-lg-6 col-md-6 col-sm-6 col-6 mt--24">
product card...
</div>
</div>
</div>
<!-- Filter Area -->
<div class="rbt-filter-content rbt-filter-content-horizontal rbt-filter-collapse-area start-from-right">
<div class="inner pl--24">
<div class="rbt-single-widget rbt-widget-categories mt--24">
<div class="bt-single-widget-inner">
<h4 class="rbt-widget-title rbt-widget-title-without-border">
Categories
</h4>
<div class="rbt-widget-content ">
<ul class="rbt-sidebar-list-wrapper rbt-categories-list-check">
<li class="rbt-check-group">
<input id="cat-list-1" type="checkbox" name="cat-list-1">
<label for="cat-list-1">Accessories <span class="rbt-lable count">(96)</span></label>
</li>
<li class="rbt-check-group">
<input id="cat-list-2" type="checkbox" name="cat-list-2">
<label for="cat-list-2">Best seller <span class="rbt-lable count">(12)</span></label>
</li>
...
</ul>
</div>
</div>
</div>
<div class="rbt-single-widget rbt-widget-categories mt--24">
<div class="bt-single-widget-inner">
<h4 class="rbt-widget-title rbt-widget-title-without-border">
Filter by price
</h4>
<div class="rbt-widget-content">
<ul class="rbt-sidebar-list-wrapper rbt-categories-list-check">
<li class="rbt-check-group">
<input id="rbt-cat-list-fil-1" type="checkbox" name="rbt-cat-list-fil-1">
<label for="rbt-cat-list-fil-1">Under $25 <span class="rbt-lable count">(9)</span></label>
</li>
<li class="rbt-check-group">
<input id="rbt-cat-list-fil-2" type="checkbox"
name="rbt-cat-list-fil-2">
<label for="rbt-cat-list-fil-2">$25 to $50 <span class="rbt-lable count">(12)</span></label>
</li>
...
</ul>
<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>
<div class="rbt-price-input-grp">
<input type="number" min="0" placeholder="$ Min">
<input type="number" min="0" placeholder="$ Max">
<a href="#" class="rbt-btn">$Go</a>
</div>
</div>
</div>
</div>
<div class="rbt-single-widget rbt-widget-categories mt--24">
<div class="bt-single-widget-inner">
<h4 class="rbt-widget-title rbt-widget-title-without-border">
Filter by color
</h4>
<div class="rbt-inner-search-field border-0 pt--16 pb--16">
<div class="rbt-search-input-section rbt-sm-search-section">
<input type="text" placeholder="Search and Select Product">
<button class="serach-btn search-btn-dark" type="submit"><i class="fa-sharp fa-solid fa-magnifying-glass"></i></button>
</div>
</div>
<div class="rbt-widget-content rbt-scroll-content">
<ul class="rbt-sidebar-list-wrapper rbt-categories-list-color-swatch">
<li class="rbt-color-swatch-group">
<a href="#" class="rbt-color-swatch-content">
<span class="rbt-color-swatch">
<span class="rbt-color-swatch-bg rbt-swatch-bg-black"></span>
<span class="rbt-color-swatch-text">Black</span>
</span>
</a>
<span class="rbt-color-swatch-count">(33)</span>
</li>
<li class="rbt-color-swatch-group">
<a href="#" class="rbt-color-swatch-content active">
<span class="rbt-color-swatch">
<span class="rbt-color-swatch-bg rbt-swatch-bg-blue"></span>
<span class="rbt-color-swatch-text">Blue</span>
</span>
</a>
<span class="rbt-color-swatch-count">(56)</span>
</li>
...
</ul>
</div>
</div>
</div>
<div class="rbt-single-widget rbt-widget-categories mt--24">
<div class="bt-single-widget-inner">
<h4 class="rbt-widget-title rbt-widget-title-without-border">
Brand
</h4>
<div class="rbt-widget-content">
<ul class="rbt-sidebar-list-wrapper rbt-categories-list-check rbt-categories-brand-list-check">
<li class="rbt-check-group">
<input id="rbt-cat-list-brand-radio-1" type="radio"
name="rbt-cat-list-brand-radio">
<label for="rbt-cat-list-brand-radio-1">
<span class="rbt-lable-content">
<span class="rbt-lable-img"><img src="..." alt="Catagory Image"></span>
<span class="rbt-lable-text">Acme</span>
</span>
<span class="rbt-lable-count">(96)</span>
</label>
</li>
<li class="rbt-check-group">
<input id="rbt-cat-list-brand-radio-2" type="radio"
name="rbt-cat-list-brand-radio">
<label for="rbt-cat-list-brand-radio-2">
<span class="rbt-lable-content">
<span class="rbt-lable-img"><img src="..." alt="Catagory Image"></span>
<span class="rbt-lable-text">Aurarts</span>
</span>
<span class="rbt-lable-count">(12)</span>
</label>
</li>
...
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row mt--40 mt_sm--12">
<div class="col-12">
pagination
</div>
</div>
</div>
</div>
</div>
</div>
<div class="rbt-component-area rbt-shop-filter-area rbt-bg-color-white rbt-section-gapBottom">
<div class="container">
<div class="row row--16 mt_dec--24">
<div class="col-lg-3 col-md-12 col-sm-12 col-12 mt--24">
filter sidebar...
</div>
<div class="col-lg-9 col-md-12 col-sm-12 col-12 mt--24">
<div class="row row--12">
<div class="col-md-12">
filter tools...
</div>
</div>
<!-- Start Card Area -->
<div class="row row--12">
<!-- Single Card -->
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-6 col-6 mt--24">
product card...
</div>
<!-- Single Card -->
<div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-6 col-6 mt--24">
product-card...
</div>
</div>
<!-- End Card Area -->
<div class="row mt--40 mt_sm--16">
<div class="col-12">
pagination
</div>
</div>
</div>
</div>
</div>
</div>
<div class="rbt-component-area rbt-shop-filter-area rbt-bg-color-white rbt-section-gapBottom">
<div class="container">
<div class="row row--16 mt_dec--24">
<div class="col-lg-3 col-md-12 col-sm-12 col-12 mt--24">
filter sidebar...
</div>
<div class="col-lg-9 col-md-12 col-sm-12 col-12 mt--24">
<div class="row row--12">
<div class="col-md-12">
filter tools...
</div>
</div>
<!-- Start Card Area -->
<div class="row row--12">
<!-- Single Card -->
<div class="col-xxl-4 col-xl-6 col-lg-6 col-md-6 col-sm-6 col-6 mt--24">
product card...
</div>
<!-- Single Card -->
<div class="col-xxl-4 col-xl-6 col-lg-6 col-md-6 col-sm-6 col-6 mt--24">
product-card...
</div>
</div>
<!-- End Card Area -->
<div class="row mt--40 mt_sm--16">
<div class="col-12">
pagination
</div>
</div>
</div>
</div>
</div>
</div>
<div class="rbt-component-area rbt-shop-filter-area rbt-bg-color-white rbt-section-gapBottom">
<div class="rbt-fullwidth-wrapper">
<div class="row row--16 mt_dec--24">
<div class="col-lg-3 col-md-12 col-sm-12 col-12 mt--24">
filter sidebar...
</div>
<div class="col-lg-9 col-md-12 col-sm-12 col-12 mt--24">
<div class="row row--12">
<div class="col-md-12">
filter tools...
</div>
</div>
<!-- Start Card Area -->
<div class="row row--12">
<!-- Single Card -->
<div class="col-xxl-3 col-xl-4 col-lg-4 col-md-6 col-sm-6 col-6 mt--24">
product card...
</div>
<!-- Single Card -->
<div class="col-xxl-3 col-xl-4 col-lg-4 col-md-6 col-sm-6 col-6 mt--24">
product-card...
</div>
</div>
<!-- End Card Area -->
<div class="row mt--40 mt_sm--16">
<div class="col-12">
pagination
</div>
</div>
</div>
</div>
</div>
</div>