Footer
Documentation and examples for Bootstrap's powerful, responsive navigation header, the navbar.
Footer #1
<!-- footer -->
<footer class="pt-5 pb-3">
<div class="container">
<div class="row justify-content-center text-center align-items-center ">
<div class="col-12 col-md-12 col-xxl-6 px-0 ">
<div class="mb-4">
<a href="../index.html"><img src="../assets/images/brand/logo/logo-2.svg" alt="" class="mb-4"></a>
<p class="lead">Geek is feature rich components and beautifully Bootstrap 5 template for
developers,
built with bootstrap responsive framework.
</p>
</div>
<nav class="nav nav-footer justify-content-center">
<a class="nav-link" href="#">About</a>
<span class="my-2 vr opacity-50"></span>
<a class="nav-link" href="#">Careers </a>
<span class="my-2 vr opacity-50"></span>
<a class="nav-link" href="#">Contact</a>
<span class="my-2 vr opacity-50"></span>
<a class="nav-link" href="#">Pricing</a>
<span class="my-2 vr opacity-50"></span>
<a class="nav-link" href="#">Blog</a>
<span class="my-2 vr opacity-50"></span>
<a class="nav-link" href="#">Affilliate</a>
<span class="my-2 vr opacity-50"></span>
<a class="nav-link" href="#">Help</a>
<span class="my-2 vr opacity-50"></span>
<a class="nav-link" href="#">Investors</a>
</nav>
</div>
</div>
<!-- Desc -->
<hr class="mt-6 mb-3">
<div class="row align-items-center">
<!-- Desc -->
<div class="col-lg-3 col-md-6 col-12">
<span>
©
<span id="copyright">
<script>
document.getElementById('copyright').appendChild(document.createTextNode(new Date()
.getFullYear()))
</script>
</span>
Geeks-UI, Inc. All Rights Reserved
</span>
</div>
<!-- Links -->
<div class="col-12 col-md-6 col-lg-7 d-lg-flex justify-content-center">
<nav class="nav nav-footer">
<a class="nav-link ps-0" href="#">Privacy Policy</a>
<a class="nav-link px-2 px-md-0" href="#">Cookie Notice </a>
<a class="nav-link" href="#">Terms of Use</a>
</nav>
</div>
<div class="col-lg-2 col-md-12 col-12 d-lg-flex justify-content-end">
<div class="">
<!--Facebook-->
<a href="#" class="text-muted me-2">
<i class="mdi mdi-facebook fs-3"></i>
</a>
<!--Twitter-->
<a href="#" class="text-muted me-2">
<i class="mdi mdi-twitter fs-3"></i>
</a>
<!--GitHub-->
<a href="#" class="text-muted">
<i class="mdi mdi-github fs-3"></i>
</a>
</div>
</div>
</div>
<!-- Links -->
</div>
</footer>Footer #2
<!-- footer -->
<footer class="pt-lg-10 pt-5 footer bg-white">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6 col-12">
<!-- about company -->
<div class="mb-4">
<img src="../assets/images/brand/logo/logo.svg" alt="" class="logo-inverse ">
<div class="mt-4">
<p>Geek is feature-rich components and beautifully Bootstrap UIKit for developers, built with bootstrap
responsive framework.
</p>
<!-- social media -->
<div class="fs-4 mt-4">
<a href="#" class="mdi mdi-facebook fs-4 text-muted me-2"></a>
<a href="#" class="mdi mdi-twitter text-muted me-2"></a>
<a href="#" class="mdi mdi-instagram text-muted "></a>
</div>
</div>
</div>
</div>
<div class="offset-lg-1 col-lg-2 col-md-3 col-6">
<div class="mb-4">
<!-- list -->
<h3 class="fw-bold mb-3">Company</h3>
<ul class="list-unstyled nav nav-footer flex-column nav-x-0">
<li><a href="#" class="nav-link">About</a></li>
<li><a href="#" class="nav-link">Pricing</a></li>
<li><a href="#" class="nav-link">Blog</a></li>
<li><a href="#" class="nav-link">Careers</a></li>
<li><a href="#" class="nav-link">Contact</a></li>
</ul>
</div>
</div>
<div class="col-lg-2 col-md-3 col-6">
<div class="mb-4">
<!-- list -->
<h3 class="fw-bold mb-3">Support</h3>
<ul class="list-unstyled nav nav-footer flex-column nav-x-0">
<li><a href="#" class="nav-link">Help and Support</a></li>
<li><a href="#" class="nav-link">Become Instructor</a></li>
<li><a href="#" class="nav-link">Get the app</a></li>
<li><a href="#" class="nav-link">FAQ’s</a></li>
<li><a href="#" class="nav-link">Tutorial</a></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-12">
<!-- contact info -->
<div class="mb-4">
<h3 class="fw-bold mb-3">Get in touch</h3>
<p>339 McDermott Points Hettingerhaven, NV 15283</p>
<p class="mb-1">Email: <a href="#">support@geeksui.com</a></p>
<p>Phone: <span class="text-dark fw-semibold">(000) 123 456 789</span></p>
<div class="d-flex">
<a href="#"><img src="../assets/images/svg/appstore.svg" alt="" class="img-fluid"></a>
<a href="#" class="ms-2"><img src="../assets/images/svg/playstore.svg" alt=""
class="img-fluid"></a>
</div>
</div>
</div>
</div>
<div class="row align-items-center g-0 border-top py-2 mt-6">
<!-- Desc -->
<div class="col-md-10 col-12">
<div class="d-lg-flex align-items-center">
<div class="me-4">
<span>
©
<span id="copyright">
<script>document.getElementById('copyright').appendChild(document.createTextNode(new Date().getFullYear()))</script>
</span>
Geeks-UI
</span>
</div>
<div>
<nav class="nav nav-footer">
<a class="nav-link ps-0" href="#">Privacy Policy</a>
<a class="nav-link px-2 px-md-3" href="#">Cookie Notice </a>
<a class="nav-link d-none d-lg-block" href="#">Do Not Sell My Personal Information </a>
<a class="nav-link" href="#">Terms of Use</a>
</nav>
</div>
</div>
</div>
<!-- Links -->
<div class="col-12 col-md-2 d-md-flex justify-content-end">
<div class="dropdown">
<a href="#" class="dropdown-toggle text-body" id="dropdownMenuLink" data-bs-toggle="dropdown"
aria-expanded="false">
<i class="fe fe-globe me-2 align-middle"></i>Language
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<li>
<a class="dropdown-item " href="#">
<span class="me-2">
<svg width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_5543_19736)">
<path d="M0 0.5H16V12.5H0V0.5Z" fill="#012169" />
<path
d="M1.875 0.5L7.975 5.025L14.05 0.5H16V2.05L10 6.525L16 10.975V12.5H14L8 8.025L2.025 12.5H0V11L5.975 6.55L0 2.1V0.5H1.875Z"
fill="white" />
<path
d="M10.6 7.525L16 11.5V12.5L9.225 7.525H10.6ZM6 8.025L6.15 8.9L1.35 12.5H0L6 8.025ZM16 0.5V0.575L9.775 5.275L9.825 4.175L14.75 0.5H16ZM0 0.5L5.975 4.9H4.475L0 1.55V0.5Z"
fill="#C8102E" />
<path d="M6.025 0.5V12.5H10.025V0.5H6.025ZM0 4.5V8.5H16V4.5H0Z" fill="white" />
<path d="M0 5.325V7.725H16V5.325H0ZM6.825 0.5V12.5H9.225V0.5H6.825Z" fill="#C8102E" />
</g>
<defs>
<clipPath id="clip0_5543_19736">
<rect width="16" height="12" fill="white" transform="translate(0 0.5)" />
</clipPath>
</defs>
</svg>
</span>
English
</a>
</li>
<li>
<a class="dropdown-item " href="#">
<span class="me-2">
<svg width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_5543_19744)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0.5H16V12.5H0V0.5Z" fill="white" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0.5H5.3325V12.5H0V0.5Z" fill="#002654" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.668 0.5H16.0005V12.5H10.668V0.5Z"
fill="#CE1126" />
</g>
<defs>
<clipPath id="clip0_5543_19744">
<rect width="16" height="12" fill="white" transform="translate(0 0.5)" />
</clipPath>
</defs>
</svg>
</span>
Français
</a>
</li>
<li>
<a class="dropdown-item " href="#">
<span class="me-2">
<svg width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_5543_19751)">
<path d="M0 8.5H16V12.5H0V8.5Z" fill="#FFCE00" />
<path d="M0 0.5H16V4.5H0V0.5Z" fill="black" />
<path d="M0 4.5H16V8.5H0V4.5Z" fill="#DD0000" />
</g>
<defs>
<clipPath id="clip0_5543_19751">
<rect width="16" height="12" fill="white" transform="translate(0 0.5)" />
</clipPath>
</defs>
</svg>
</span>
Deutsch
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</footer>Footer #3
<!-- footer -->
<footer class="py-lg-10 py-5">
<div class="container">
<div class="row justify-content-center text-center ">
<div class="col-12 col-md-12 col-xl-8 px-0 ">
<nav class="nav nav-footer justify-content-center">
<a class="nav-link" href="#">About </a>
<a class="nav-link" href="#">Blog </a>
<a class="nav-link" href="#">Send feedback</a>
<a class="nav-link" href="#">Terms & Conditions</a>
<a class="nav-link" href="#">Get Support</a>
</nav>
</div>
<!-- Desc -->
<div class="col-lg-8 col-md-12 col-12">
<div class="my-6">
<!--Facebook-->
<a href="#" class="text-muted me-4">
<i class="mdi mdi-facebook fs-3"></i>
</a>
<!--Twitter-->
<a href="#" class="text-muted me-4">
<i class="mdi mdi-twitter fs-3"></i>
</a>
<!--LinkedIn-->
<a href="#" class="text-muted me-4">
<i class="mdi mdi-linkedin fs-3"></i>
</a>
<!--GitHub-->
<a href="#" class="text-muted me-4">
<i class="mdi mdi-github fs-3"></i>
</a>
<!--GitHub-->
<a href="#" class="text-muted">
<i class="mdi mdi-twitch fs-3"></i>
</a>
</div>
</div>
<div class="col-lg-8 col-md-12 col-12">
<span>
©
<span id="copyright">
<script>document.getElementById('copyright').appendChild(document.createTextNode(new Date().getFullYear()))</script>
</span>
Geeks-UI, Inc. All Rights Reserved
</span>
</div>
<!-- Links -->
</div>
</div>
</fotter>Footer #4
<!-- footer -->
<footer class="pt-lg-10 pt-5 footer bg-white">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6 col-12">
<!-- about company -->
<div class="mb-4">
<img src="../assets/images/brand/logo/logo.svg" alt="" class="logo-inverse ">
<div class="mt-4">
<p>Geek is feature-rich components and beautifully Bootstrap UIKit for developers, built with bootstrap responsive framework.</p>
<!-- social media -->
<div class="fs-4 mt-4">
<a href="#" class="mdi mdi-facebook fs-4 text-muted me-2"></a>
<a href="#" class="mdi mdi-twitter text-muted me-2"></a>
<a href="#" class="mdi mdi-instagram text-muted "></a>
</div>
</div>
</div>
</div>
<div class="offset-lg-1 col-lg-2 col-md-3 col-6">
<div class="mb-4">
<!-- list -->
<h3 class="fw-bold mb-3">Company</h3>
<ul class="list-unstyled nav nav-footer flex-column nav-x-0">
<li><a href="#" class="nav-link">About</a></li>
<li><a href="#" class="nav-link">Pricing</a></li>
<li><a href="#" class="nav-link">Blog</a></li>
<li><a href="#" class="nav-link">Careers</a></li>
<li><a href="#" class="nav-link">Contact</a></li>
</ul>
</div>
</div>
<div class="col-lg-2 col-md-3 col-6">
<div class="mb-4">
<!-- list -->
<h3 class="fw-bold mb-3">Support</h3>
<ul class="list-unstyled nav nav-footer flex-column nav-x-0">
<li><a href="#" class="nav-link">Help and Support</a></li>
<li><a href="#" class="nav-link">Become Instructor</a></li>
<li><a href="#" class="nav-link">Get the app</a></li>
<li><a href="#" class="nav-link">FAQ’s</a></li>
<li><a href="#" class="nav-link">Tutorial</a></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-12">
<!-- contact info -->
<div class="mb-4">
<h3 class="fw-bold mb-3">Get in touch</h3>
<p>339 McDermott Points Hettingerhaven, NV 15283</p>
<p class="mb-1">Email: <a href="#">support@geeksui.com</a></p>
<p>Phone: <span class="text-dark fw-semibold">(000) 123 456 789</span></p>
</div>
</div>
</div>
<div class="row align-items-center g-0 border-top py-2 mt-6">
<!-- Desc -->
<div class="col-lg-4 col-md-5 col-12">
<span>
©
<span id="copyright">
<script>document.getElementById('copyright').appendChild(document.createTextNode(new Date().getFullYear()))</script>
</span>
Geeks-UI, Inc. All Rights Reserved
</span>
</div>
<!-- Links -->
<div class="col-12 col-md-7 col-lg-8 d-md-flex justify-content-end">
<nav class="nav nav-footer">
<a class="nav-link ps-0" href="#">Privacy Policy</a>
<a class="nav-link px-2 px-md-3" href="#">Cookie Notice </a>
<a class="nav-link" href="#">Terms of Use</a>
</nav>
</div>
</div>
</div>
</footer>Footer #5
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="row align-items-center g-0 border-top py-2">
<!-- Desc -->
<div class="col-md-6 col-12 text-center text-md-start">
<span>© <span id="copyright">
<script>document.getElementById('copyright').appendChild(document.createTextNode(new Date().getFullYear()))</script>
</span>Geeks. All Rights Reserved.</span>
</div>
<!-- Links -->
<div class="col-12 col-md-6">
<nav class="nav nav-footer justify-content-center justify-content-md-end">
<a class="nav-link active ps-0" href="#">Privacy</a>
<a class="nav-link" href="#">Terms </a>
<a class="nav-link" href="#">Feedback</a>
<a class="nav-link" href="#">Support</a>
</nav>
</div>
</div>
</div>
</footer>