Footers
Component 1
<footer class="bg-white footer-light pt-md-5 pt-4 mt-md-4">
<div class="container pt-md-2">
<div class="row row-cols-md-4 row-cols-1 pb-lg-4 mb-lg-2">
<div class="col">
<h2 class="fs-4 fw-semibold text-secondary data-expendable position-relative mb-0">Product</h2>
<ul class="nav flex-column expend-content">
<li class="nav-item"><a href="#0" class="nav-link">Features</a></li>
<li class="nav-item"><a href="#0" class="nav-link d-inline-flex align-items-center gap-2">Design Tools<span class="badge badge-sm rounded-pill bg-primary text-white">NEW</span></a></li>
<li class="nav-item"><a href="#0" class="nav-link">Collaboration</a></li>
<li class="nav-item"><a href="#0" class="nav-link">Extensions</a></li>
</ul>
</div>
<div class="col">
<h2 class="fs-4 fw-semibold text-secondary data-expendable position-relative mb-0">Nayzak</h2>
<ul class="nav flex-column expend-content">
<li class="nav-item"><a href="#0" class="nav-link">Theme Features</a></li>
<li class="nav-item"><a href="#0" class="nav-link">Robust Coding</a></li>
<li class="nav-item"><a href="#0" class="nav-link">Light Weight</a></li>
<li class="nav-item"><a href="#0" class="nav-link">Compare to others</a></li>
</ul>
</div>
<div class="col">
<h2 class="fs-4 fw-semibold text-secondary data-expendable position-relative mb-0">About</h2>
<ul class="nav flex-column expend-content">
<li class="nav-item"><a href="#0" class="nav-link">Our Story</a></li>
<li class="nav-item"><a href="#0" class="nav-link">Our Team</a></li>
<li class="nav-item"><a href="#0" class="nav-link">Work With Us</a></li>
<li class="nav-item"><a href="#0" class="nav-link">Contact Us</a></li>
</ul>
</div>
<div class="col">
<h2 class="fs-4 fw-semibold text-secondary data-expendable position-relative mb-0">Account</h2>
<ul class="nav flex-column expend-content">
<li class="nav-item"><a href="#0" class="nav-link">Privacy Policy</a></li>
<li class="nav-item"><a href="#0" class="nav-link">Terms & Conditions</a></li>
<li class="nav-item"><a href="#0" class="nav-link">License Info</a></li>
<li class="nav-item"><a href="#0" class="nav-link">Returns & Refunds</a></li>
</ul>
</div>
</div>
<div class="d-flex justify-content-between align-items-center text-secondary py-5 pb-md-5 pb-4">
<a href="#0"><img src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/lazy-placeholder.gif" data-src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/darkblue-toggle-brand.svg" alt="Brand" width="32" height="29"></a>
<p class="mb-0 fs-6">© <script>document.write(new Date().getFullYear())</script> Nayzak</p>
<ul class="nav align-items-center gap-4 d-md-flex d-none mb-0">
<li><a href="#0" class="hvr-float-shadow"><i class="ti ti-brand-facebook text-secondary fs-3"></i></a></li>
<li><a href="#0" class="hvr-float-shadow"><i class="ti ti-brand-twitter text-secondary fs-3"></i></a></li>
<li><a href="#0" class="hvr-float-shadow"><i class="ti ti-brand-youtube text-secondary fs-3"></i></a></li>
<li><a href="#0" class="hvr-float-shadow"><i class="ti ti-brand-instagram text-secondary fs-3"></i></a></li>
</ul>
</div>
</div>
</footer>
Component 2
<footer class="bg-white footer-light pt-5 mt-md-4">
<div class="container pt-md-2">
<div class="row pb-lg-4 mb-lg-2">
<div class="col-md-6">
<div class="pe-md-5 me-lg-5">
<a href="#0" class="d-inline-block mb-md-4 mb-2"><img src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/lazy-placeholder.gif" data-src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/dark-brand.svg" alt="Brand" width="156" height="30"></a>
<p class="text-secondary fs-4">Nayzak, everyone in my team works towards the samegoal. This enabled our teams to ship new — ideas and feel more capable. Podcasting operational</p>
<ul class="nav align-items-center gap-4 d-md-flex d-none pt-md-4">
<li><a href="#0" class="hvr-float-shadow"><i class="ti ti-brand-facebook text-secondary fs-3"></i></a></li>
<li><a href="#0" class="hvr-float-shadow"><i class="ti ti-brand-twitter text-secondary fs-3"></i></a></li>
<li><a href="#0" class="hvr-float-shadow"><i class="ti ti-brand-youtube text-secondary fs-3"></i></a></li>
<li><a href="#0" class="hvr-float-shadow"><i class="ti ti-brand-instagram text-secondary fs-3"></i></a></li>
</ul>
</div>
</div>
<div class="col-md-3">
<h2 class="fs-4 fw-semibold text-secondary data-expendable position-relative mb-0">Nayzak</h2>
<ul class="nav flex-column expend-content">
<li class="nav-item"><a href="#0" class="nav-link">Theme Features</a></li>
<li class="nav-item"><a href="#0" class="nav-link">Robust Coding</a></li>
<li class="nav-item"><a href="#0" class="nav-link">Light Weight</a></li>
<li class="nav-item"><a href="#0" class="nav-link">Compare to others</a></li>
</ul>
</div>
<div class="col-md-3">
<h2 class="fs-4 fw-semibold text-secondary data-expendable position-relative mb-0">Account</h2>
<ul class="nav flex-column expend-content">
<li class="nav-item"><a href="#0" class="nav-link">Privacy Policy</a></li>
<li class="nav-item"><a href="#0" class="nav-link">Terms & Conditions</a></li>
<li class="nav-item"><a href="#0" class="nav-link">License Info</a></li>
<li class="nav-item"><a href="#0" class="nav-link">Returns & Refunds</a></li>
</ul>
</div>
</div>
<div class="text-md-center text-secondary py-5 pb-md-5 pb-4">
<p class="mb-0 fs-6">© <script>document.write(new Date().getFullYear())</script> Nayzak</p>
</div>
</div>
</footer>
Component 3
<footer class="bg-white no-submenu footer-light pt-5 mt-md-4">
<div class="container d-flex align-items-md-center flex-column pt-md-2">
<a href="#0" class="mb-md-5 mb-4"><img src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/lazy-placeholder.gif" data-src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/dark-brand.svg" alt="Brand" width="156" height="30"></a>
<ul class="nav align-items-md-center justify-content-center flex-md-row flex-column font-syne gap-md-5 w-100 pt-lg-2 pb-5">
<li><a href="#" class="fs-5 text-black-80 fw-bold d-flex data-expendable">About</a></li>
<li><a href="#" class="fs-5 text-black-80 fw-bold d-flex data-expendable">Account</a></li>
<li><a href="#" class="fs-5 text-black-80 fw-bold d-flex data-expendable">Support</a></li>
<li><a href="#" class="fs-5 text-black-80 fw-bold d-flex data-expendable">Privacy</a></li>
</ul>
<ul class="nav align-items-center gap-4 d-md-flex d-none pt-lg-3">
<li><a href="#0" class="hvr-float-shadow"><i class="ti ti-brand-facebook text-secondary fs-3"></i></a></li>
<li><a href="#0" class="hvr-float-shadow"><i class="ti ti-brand-twitter text-secondary fs-3"></i></a></li>
<li><a href="#0" class="hvr-float-shadow"><i class="ti ti-brand-youtube text-secondary fs-3"></i></a></li>
<li><a href="#0" class="hvr-float-shadow"><i class="ti ti-brand-instagram text-secondary fs-3"></i></a></li>
</ul>
<div class="text-center text-secondary pt-md-4 pb-md-5 pb-4">
<p class="mb-0 fs-6">© <script>document.write(new Date().getFullYear())</script> Nayzak</p>
</div>
</div>
</footer>
Component 4
<footer class="bg-black-90 footer-dark pt-md-5 pt-4 mt-md-4">
<div class="container pt-md-2">
<div class="row row-cols-md-4 row-cols-1 pb-lg-4 mb-lg-2">
<div class="col">
<h2 class="fs-4 fw-semibold text-white data-expendable position-relative mb-0">Product</h2>
<ul class="nav flex-column expend-content">
<li class="nav-item"><a href="#0" class="nav-link">Extensions</a></li>
<li class="nav-item"><a href="#0" class="nav-link d-inline-flex align-items-center gap-2">Design Tools<span class="badge badge-sm rounded-pill bg-white text-black-80">NEW</span></a></li>
<li class="nav-item"><a href="#0" class="nav-link">Collaboration</a></li>
<li class="nav-item"><a href="#0" class="nav-link">Features</a></li>
</ul>
</div>
<div class="col">
<h2 class="fs-4 fw-semibold text-white data-expendable position-relative mb-0">Nayzak</h2>
<ul class="nav flex-column expend-content">
<li class="nav-item"><a href="#0" class="nav-link">Compare to others</a></li>
<li class="nav-item"><a href="#0" class="nav-link">Robust Coding</a></li>
<li class="nav-item"><a href="#0" class="nav-link">Light Weight</a></li>
<li class="nav-item"><a href="#0" class="nav-link">Theme Features</a></li>
</ul>
</div>
<div class="col">
<h2 class="fs-4 fw-semibold text-white data-expendable position-relative mb-0">About</h2>
<ul class="nav flex-column expend-content">
<li class="nav-item"><a href="#0" class="nav-link">Contact Us</a></li>
<li class="nav-item"><a href="#0" class="nav-link">Our Team</a></li>
<li class="nav-item"><a href="#0" class="nav-link">Work With Us</a></li>
<li class="nav-item"><a href="#0" class="nav-link">Our Story</a></li>
</ul>
</div>
<div class="col">
<h2 class="fs-4 fw-semibold text-white data-expendable position-relative mb-0">Account</h2>
<ul class="nav flex-column expend-content">
<li class="nav-item"><a href="#0" class="nav-link">Returns & Refunds</a></li>
<li class="nav-item"><a href="#0" class="nav-link">Terms & Conditions</a></li>
<li class="nav-item"><a href="#0" class="nav-link">License Info</a></li>
<li class="nav-item"><a href="#0" class="nav-link">Privacy Policy</a></li>
</ul>
</div>
</div>
<div class="d-flex justify-content-between align-items-center text-white py-5 pb-md-5 pb-4">
<a href="#0"><img src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/lazy-placeholder.gif" data-src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/lightblue-toggle-brand.svg" alt="Brand" width="32" height="33"></a>
<p class="mb-0 fs-6">© <script>document.write(new Date().getFullYear())</script> Nayzak</p>
<ul class="nav align-items-center gap-4 d-md-flex d-none mb-0">
<li><a href="#0" class="hvr-float-shadow"><i class="ti ti-brand-facebook text-black-40 fs-3"></i></a></li>
<li><a href="#0" class="hvr-float-shadow"><i class="ti ti-brand-twitter text-black-40 fs-3"></i></a></li>
<li><a href="#0" class="hvr-float-shadow"><i class="ti ti-brand-youtube text-black-40 fs-3"></i></a></li>
<li><a href="#0" class="hvr-float-shadow"><i class="ti ti-brand-instagram text-black-40 fs-3"></i></a></li>
</ul>
</div>
</div>
</footer>
Component 5
<footer class="bg-black-90 footer-dark pt-5 mt-md-4">
<div class="container pt-md-2">
<div class="row pb-lg-4 mb-lg-2">
<div class="col-md-6">
<div class="pe-md-5 me-lg-5">
<a href="#0" class="d-inline-block mb-md-4 mb-2"><img src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/lazy-placeholder.gif" data-src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/light-brand.svg" alt="Brand" width="156" height="30"></a>
<p class="text-black-40 fs-4">Nayzak, everyone in my team works towards the samegoal. This enabled our teams to ship new — ideas and feel more capable. Podcasting operational</p>
<ul class="nav align-items-center gap-4 d-md-flex d-none pt-md-4">
<li><a href="#0" class="hvr-float-shadow"><i class="ti ti-brand-facebook text-black-40 fs-3"></i></a></li>
<li><a href="#0" class="hvr-float-shadow"><i class="ti ti-brand-twitter text-black-40 fs-3"></i></a></li>
<li><a href="#0" class="hvr-float-shadow"><i class="ti ti-brand-youtube text-black-40 fs-3"></i></a></li>
<li><a href="#0" class="hvr-float-shadow"><i class="ti ti-brand-instagram text-black-40 fs-3"></i></a></li>
</ul>
</div>
</div>
<div class="col-md-3">
<h2 class="fs-4 fw-semibold text-white data-expendable position-relative mb-0">Nayzak</h2>
<ul class="nav flex-column expend-content">
<li class="nav-item"><a href="#0" class="nav-link">Compare to others</a></li>
<li class="nav-item"><a href="#0" class="nav-link">Robust Coding</a></li>
<li class="nav-item"><a href="#0" class="nav-link">Light Weight</a></li>
<li class="nav-item"><a href="#0" class="nav-link">Theme Features</a></li>
</ul>
</div>
<div class="col-md-3">
<h2 class="fs-4 fw-semibold text-white data-expendable position-relative mb-0">Account</h2>
<ul class="nav flex-column expend-content">
<li class="nav-item"><a href="#0" class="nav-link">Returns & Refunds</a></li>
<li class="nav-item"><a href="#0" class="nav-link">Terms & Conditions</a></li>
<li class="nav-item"><a href="#0" class="nav-link">License Info</a></li>
<li class="nav-item"><a href="#0" class="nav-link">Privacy Policy</a></li>
</ul>
</div>
</div>
<div class="text-md-center text-white py-5 pb-md-5 pb-4">
<p class="mb-0 fs-6">© <script>document.write(new Date().getFullYear())</script> Nayzak</p>
</div>
</div>
</footer>
Component 6
<footer class="bg-black-90 no-submenu footer-dark pt-5 mt-md-4">
<div class="container d-flex align-items-md-center flex-column pt-md-2">
<a href="#0" class="mb-md-5 mb-4"><img src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/lazy-placeholder.gif" data-src="https://nayzak.design/preview/nayzak-saas-templates/sharedassets/light-brand.svg" alt="Brand" width="156" height="30"></a>
<ul class="nav align-items-md-center justify-content-center flex-md-row flex-column font-syne gap-md-5 w-100 pt-lg-2 pb-5">
<li><a href="#" class="fs-5 text-white fw-bold d-flex data-expendable">About</a></li>
<li><a href="#" class="fs-5 text-white fw-bold d-flex data-expendable">Account</a></li>
<li><a href="#" class="fs-5 text-white fw-bold d-flex data-expendable">Support</a></li>
<li><a href="#" class="fs-5 text-white fw-bold d-flex data-expendable">Privacy</a></li>
</ul>
<ul class="nav align-items-center gap-4 d-md-flex d-none pt-lg-3">
<li><a href="#0" class="hvr-float-shadow"><i class="ti ti-brand-facebook text-black-40 fs-3"></i></a></li>
<li><a href="#0" class="hvr-float-shadow"><i class="ti ti-brand-twitter text-black-40 fs-3"></i></a></li>
<li><a href="#0" class="hvr-float-shadow"><i class="ti ti-brand-youtube text-black-40 fs-3"></i></a></li>
<li><a href="#0" class="hvr-float-shadow"><i class="ti ti-brand-instagram text-black-40 fs-3"></i></a></li>
</ul>
<div class="text-center text-white pt-md-4 pb-md-5 pb-4">
<p class="mb-0 fs-6">© <script>document.write(new Date().getFullYear())</script> Nayzak</p>
</div>
</div>
</footer>