Buy now
Footer
The bottom section of a webpage. Typically contains navigation, widgets and relevant copyright information.
Cartzilla component
Light version
<!-- Light footer -->
<footer class="bg-secondary pt-5">
<div class="container">
<div class="row pb-2">
<div class="col-md-4 col-sm-6">
<div class="widget widget-links pb-2 mb-4">
<h3 class="widget-title">Shop departments</h3>
<ul class="widget-list">
<li class="widget-list-item">
<a href="#" class="widget-list-link">Sneakers & Athletic</a>
</li>
<li class="widget-list-item">
<a href="#" class="widget-list-link">Athletic Apparel</a>
</li>
<li class="widget-list-item">
<a href="#" class="widget-list-link">Sandals</a>
</li>
<li class="widget-list-item">
<a href="#" class="widget-list-link">Jeans</a>
</li>
<li class="widget-list-item">
<a href="#" class="widget-list-link">Shirts & Tops</a>
</li>
<li class="widget-list-item">
<a href="#" class="widget-list-link">Shorts</a>
</li>
<li class="widget-list-item">
<a href="#" class="widget-list-link">T-Shirts</a>
</li>
<li class="widget-list-item">
<a href="#" class="widget-list-link">Swimwear</a>
</li>
<li class="widget-list-item">
<a href="#" class="widget-list-link">Clogs & Mules</a>
</li>
<li class="widget-list-item">
<a href="#" class="widget-list-link">Bags & Wallets</a>
</li>
<li class="widget-list-item">
<a href="#" class="widget-list-link">Accessories</a>
</li>
<li class="widget-list-item">
<a href="#" class="widget-list-link">Sunglasses & Eyewear</a>
</li>
<li class="widget-list-item">
<a href="#" class="widget-list-link">Watches</a>
</li>
</ul>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="widget widget-links pb-2 mb-4">
<h3 class="widget-title">Account & shipping info</h3>
<ul class="widget-list">
<li class="widget-list-item">
<a href="#" class="widget-list-link">Your account</a>
</li>
<li class="widget-list-item">
<a href="#" class="widget-list-link">Shipping rates & policies</a>
</li>
<li class="widget-list-item">
<a href="#" class="widget-list-link">Refunds & replacements</a>
</li>
<li class="widget-list-item">
<a href="#" class="widget-list-link">Order tracking</a>
</li>
<li class="widget-list-item">
<a href="#" class="widget-list-link">Delivery info</a>
</li>
<li class="widget-list-item">
<a href="#" class="widget-list-link">Taxes & fees</a>
</li>
</ul>
</div>
<div class="widget widget-links pb-2 mb-4">
<h3 class="widget-title">About us</h3>
<ul class="widget-list">
<li class="widget-list-item">
<a href="#" class="widget-list-link">About company</a>
</li>
<li class="widget-list-item">
<a href="#" class="widget-list-link">Our team</a>
</li>
<li class="widget-list-item">
<a href="#" class="widget-list-link">Careers</a>
</li>
<li class="widget-list-item">
<a href="#" class="widget-list-link">News</a>
</li>
</ul>
</div>
</div>
<div class="col-md-4">
<div class="widget pb-2 mb-4">
<h3 class="widget-title pb-1">Stay informed</h3>
<form class="input-group flex-nowrap">
<i class="ci-mail position-absolute top-50 translate-middle-y text-muted fs-base ms-3"></i>
<input class="form-control rounded-start" type="email" placeholder="Your email" required>
<button class="btn btn-primary" type="submit">Subscribe*</button>
</form>
<div class="form-text">*Subscribe to our newsletter to receive early discount offers, updates and new products info.</div>
</div>
<div class="widget pb-2 mb-4">
<h3 class="widget-title pb-1">Download our app</h3>
<div class="d-flex flex-wrap">
<div class="me-2 mb-2">
<a class="btn-market btn-apple" href="#" role="button">
<span class="btn-market-subtitle">Download on the</span>
<span class="btn-market-title">App Store</span>
</a>
</div>
<div class="mb-2">
<a class="btn-market btn-google" href="#" role="button">
<span class="btn-market-subtitle">Download on the</span>
<span class="btn-market-title">Google Play</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="pt-5" style="background-color: #ecf2f7;">
<div class="container">
<div class="row pb-3">
<div class="col-md-3 col-sm-6 mb-4">
<div class="d-flex">
<i class="ci-rocket text-primary" style="font-size: 2.25rem;"></i>
<div class="ps-3">
<h6 class="fs-base mb-1">Fast and free delivery</h6>
<p class="mb-0 fs-ms text-muted">Free delivery for all orders over $200</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 mb-4">
<div class="d-flex">
<i class="ci-currency-exchange text-primary" style="font-size: 2.25rem;"></i>
<div class="ps-3">
<h6 class="fs-base mb-1">Money back guarantee</h6>
<p class="mb-0 fs-ms text-muted">We return money within 30 days</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 mb-4">
<div class="d-flex">
<i class="ci-support text-primary" style="font-size: 2.25rem;"></i>
<div class="ps-3">
<h6 class="fs-base mb-1">24/7 customer support</h6>
<p class="mb-0 fs-ms text-muted">Friendly 24/7 customer support</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 mb-4">
<div class="d-flex">
<i class="ci-card text-primary" style="font-size: 2.25rem;"></i>
<div class="ps-3">
<h6 class="fs-base mb-1">Secure online payment</h6>
<p class="mb-0 fs-ms text-muted">We possess SSL / Secure сertificate</p>
</div>
</div>
</div>
</div>
<hr class="mb-5">
<div class="row pb-2">
<div class="col-md-6 text-center text-md-start mb-4">
<div class="text-nowrap mb-4">
<a class="d-inline-block align-middle mt-n1 me-3" href="#">
<img class="d-block" width="117" src="path-to-logo" alt="Cartzilla"/>
</a>
<div class="btn-group dropdown disable-autohide">
<button class="btn btn-outline-secondary btn-sm dropdown-toggle px-2" type="button" data-bs-toggle="dropdown">
<img class="me-2" width="20" src="path-to-image" alt="English"/>
Eng / $
</button>
<ul class="dropdown-menu my-1">
<li class="dropdown-item">
<select class="form-select form-select-sm">
<option value="usd">$ USD</option>
<option value="eur">€ EUR</option>
<option value="ukp">£ UKP</option>
<option value="jpy">¥ JPY</option>
</select>
</li>
<li>
<a class="dropdown-item pb-1" href="#">
<img class="me-2" width="20" src="path-to-image" alt="Français"/>
Français
</a>
</li>
<li>
<a class="dropdown-item pb-1" href="#">
<img class="me-2" width="20" src="path-to-image" alt="Deutsch"/>
Deutsch
</a>
</li>
<li>
<a class="dropdown-item" href="#">
<img class="me-2" width="20" src="path-to-image" alt="Italiano"/>
Italiano
</a>
</li>
</ul>
</div>
</div>
<div class="widget widget-links">
<ul class="widget-list d-flex flex-wrap justify-content-center justify-content-md-start">
<li class="widget-list-item me-4">
<a href="#" class="widget-list-link">Outlets</a>
</li>
<li class="widget-list-item me-4">
<a href="#" class="widget-list-link">Affiliates</a>
</li>
<li class="widget-list-item me-4">
<a href="#" class="widget-list-link">Support</a>
</li>
<li class="widget-list-item me-4">
<a href="#" class="widget-list-link">Privacy</a>
</li>
<li class="widget-list-itemme-4">
<a href="#" class="widget-list-link">Terms of use</a>
</li>
</ul>
</div>
</div>
<div class="col-md-6 text-center text-md-end mb-4">
<div class="mb-3">
<a class="btn-social bs-outline bs-twitter ms-2 mb-2" href="#"><i class="ci-twitter"></i></a>
<a class="btn-social bs-outline bs-facebook ms-2 mb-2" href="#"><i class="ci-facebook"></i></a>
<a class="btn-social bs-outline bs-instagram ms-2 mb-2" href="#"><i class="ci-instagram"></i></a>
<a class="btn-social bs-outline bs-pinterest ms-2 mb-2" href="#"><i class="ci-pinterest"></i></a>
<a class="btn-social bs-outline bs-youtube ms-2 mb-2" href="#"><i class="ci-youtube"></i></a>
</div>
<img class="d-inline-block" width="187" src="path-to-image" alt="Payment methods"/>
</div>
</div>
<div class="pb-4 fs-xs text-muted text-center text-md-start">© All rights reserved. Made by <a class="text-muted" href="#">Themesbrand</a></div>
</div>
</div>
</footer>Dark version
<!-- Dark footer -->
<footer class="bg-dark pt-5">
<div class="container">
<div class="row pb-2">
<div class="col-md-4 col-sm-6">
<div class="widget widget-links widget-light pb-2 mb-4">
<h3 class="widget-title text-light">Shop departments</h3>
<ul class="widget-list">
<li class="widget-list-item">
<a href="#" class="widget-list-link">Sneakers & Athletic</a>
</li>
<li class="widget-list-item">
<a href="#" class="widget-list-link">Athletic Apparel</a>
</li>
<li class="widget-list-item">
<a href="#" class="widget-list-link">Sandals</a>
</li>
<li class="widget-list-item">
<a href="#" class="widget-list-link">Jeans</a>
</li>
<li class="widget-list-item">
<a href="#" class="widget-list-link">Shirts & Tops</a>
</li>
<li class="widget-list-item">
<a href="#" class="widget-list-link">Shorts</a>
</li>
<li class="widget-list-item">
<a href="#" class="widget-list-link">T-Shirts</a>
</li>
<li class="widget-list-item">
<a href="#" class="widget-list-link">Swimwear</a>
</li>
<li class="widget-list-item">
<a href="#" class="widget-list-link">Clogs & Mules</a>
</li>
<li class="widget-list-item">
<a href="#" class="widget-list-link">Bags & Wallets</a>
</li>
<li class="widget-list-item">
<a href="#" class="widget-list-link">Accessories</a>
</li>
<li class="widget-list-item">
<a href="#" class="widget-list-link">Sunglasses & Eyewear</a>
</li>
<li class="widget-list-item">
<a href="#" class="widget-list-link">Watches</a>
</li>
</ul>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="widget widget-links widget-light pb-2 mb-4">
<h3 class="widget-title text-light">Account & shipping info</h3>
<ul class="widget-list">
<li class="widget-list-item">
<a href="#" class="widget-list-link">Your account</a>
</li>
<li class="widget-list-item">
<a href="#" class="widget-list-link">Shipping rates & policies</a>
</li>
<li class="widget-list-item">
<a href="#" class="widget-list-link">Refunds & replacements</a>
</li>
<li class="widget-list-item">
<a href="#" class="widget-list-link">Order tracking</a>
</li>
<li class="widget-list-item">
<a href="#" class="widget-list-link">Delivery info</a>
</li>
<li class="widget-list-item">
<a href="#" class="widget-list-link">Taxes & fees</a>
</li>
</ul>
</div>
<div class="widget widget-links widget-light pb-2 mb-4">
<h3 class="widget-title">About us</h3>
<ul class="widget-list">
<li class="widget-list-item">
<a href="#" class="widget-list-link">About company</a>
</li>
<li class="widget-list-item">
<a href="#" class="widget-list-link">Our team</a>
</li>
<li class="widget-list-item">
<a href="#" class="widget-list-link">Careers</a>
</li>
<li class="widget-list-item">
<a href="#" class="widget-list-link">News</a>
</li>
</ul>
</div>
</div>
<div class="col-md-4">
<div class="widget pb-2 mb-4">
<h3 class="widget-title text-light pb-1">Stay informed</h3>
<form class="input-group flex-nowrap">
<i class="ci-mail position-absolute top-50 translate-middle-y text-muted fs-base ms-3"></i>
<input class="form-control rounded-start" type="email" placeholder="Your email" required>
<button class="btn btn-primary" type="submit">Subscribe*</button>
</form>
<div class="form-text text-light opacity-50">*Subscribe to our newsletter to receive early discount offers, updates and new products info.</div>
</div>
<div class="widget pb-2 mb-4">
<h3 class="widget-title text-light pb-1">Download our app</h3>
<div class="d-flex flex-wrap">
<div class="me-2 mb-2">
<a class="btn-market btn-apple" href="#" role="button">
<span class="btn-market-subtitle">Download on the</span>
<span class="btn-market-title">App Store</span>
</a>
</div>
<div class="mb-2">
<a class="btn-market btn-google" href="#" role="button">
<span class="btn-market-subtitle">Download on the</span>
<span class="btn-market-title">Google Play</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="pt-5 bg-darker">
<div class="container">
<div class="row pb-3">
<div class="col-md-3 col-sm-6 mb-4">
<div class="d-flex">
<i class="ci-rocket text-primary" style="font-size: 2.25rem;"></i>
<div class="ps-3">
<h6 class="fs-base text-light mb-1">Fast and free delivery</h6>
<p class="mb-0 fs-ms text-light opacity-50">Free delivery for all orders over $200</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 mb-4">
<div class="d-flex">
<i class="ci-currency-exchange text-primary" style="font-size: 2.25rem;"></i>
<div class="ps-3">
<h6 class="fs-base text-light mb-1">Money back guarantee</h6>
<p class="mb-0 fs-ms text-light opacity-50">We return money within 30 days</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 mb-4">
<div class="d-flex">
<i class="ci-support text-primary" style="font-size: 2.25rem;"></i>
<div class="ps-3">
<h6 class="fs-base text-light mb-1">24/7 customer support</h6>
<p class="mb-0 fs-ms text-light opacity-50">Friendly 24/7 customer support</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 mb-4">
<div class="d-flex">
<i class="ci-card text-primary" style="font-size: 2.25rem;"></i>
<div class="ps-3">
<h6 class="fs-base text-light mb-1">Secure online payment</h6>
<p class="mb-0 fs-ms text-light opacity-50">We possess SSL / Secure сertificate</p>
</div>
</div>
</div>
</div>
<hr class="hr-light mb-5">
<div class="row pb-2">
<div class="col-md-6 text-center text-md-start mb-4">
<div class="text-nowrap mb-4">
<a class="d-inline-block align-middle mt-n1 me-3" href="#">
<img class="d-block" width="117" src="path-to-logo" alt="Cartzilla"/>
</a>
<div class="btn-group dropdown disable-autohide">
<button class="btn btn-outline-light border-light btn-sm dropdown-toggle px-2" type="button" data-bs-toggle="dropdown">
<img class="me-2" width="20" src="path-to-image" alt="English"/>
Eng / $
</button>
<ul class="dropdown-menu my-1">
<li class="dropdown-item">
<select class="form-select form-select-sm">
<option value="usd">$ USD</option>
<option value="eur">€ EUR</option>
<option value="ukp">£ UKP</option>
<option value="jpy">¥ JPY</option>
</select>
</li>
<li>
<a class="dropdown-item pb-1" href="#">
<img class="me-2" width="20" src="path-to-image" alt="Français"/>
Français
</a>
</li>
<li>
<a class="dropdown-item pb-1" href="#">
<img class="me-2" width="20" src="path-to-image" alt="Deutsch"/>
Deutsch
</a>
</li>
<li>
<a class="dropdown-item" href="#">
<img class="me-2" width="20" src="path-to-image" alt="Italiano"/>
Italiano
</a>
</li>
</ul>
</div>
</div>
<div class="widget widget-links widget-light">
<ul class="widget-list d-flex flex-wrap justify-content-center justify-content-md-start">
<li class="widget-list-item me-4">
<a href="#" class="widget-list-link">Outlets</a>
</li>
<li class="widget-list-item me-4">
<a href="#" class="widget-list-link">Affiliates</a>
</li>
<li class="widget-list-item me-4">
<a href="#" class="widget-list-link">Support</a>
</li>
<li class="widget-list-item me-4">
<a href="#" class="widget-list-link">Privacy</a>
</li>
<li class=" widget-list-itemme-4">
<a href="#" class="widget-list-link">Terms of use</a>
</li>
</ul>
</div>
</div>
<div class="col-md-6 text-center text-md-end mb-4">
<div class="mb-3">
<a class="btn-social bs-light bs-twitter ms-2 mb-2" href="#"><i class="ci-twitter"></i></a>
<a class="btn-social bs-light bs-facebook ms-2 mb-2" href="#"><i class="ci-facebook"></i></a>
<a class="btn-social bs-light bs-instagram ms-2 mb-2" href="#"><i class="ci-instagram"></i></a>
<a class="btn-social bs-light bs-pinterest ms-2 mb-2" href="#"><i class="ci-pinterest"></i></a>
<a class="btn-social bs-light bs-youtube ms-2 mb-2" href="#"><i class="ci-youtube"></i></a>
</div>
<img class="d-inline-block" width="187" src="path-to-image" alt="Payment methods"/>
</div>
</div>
<div class="pb-4 fs-xs text-light opacity-50 text-center text-md-start">© All rights reserved. Made by <a class="text-light" href="#">Themesbrand</a></div>
</div>
</div>
</footer>