Template footer options with responsive and all the options.
Here’s an example of basic footer.
<footer class="footer bg-light">
<div class="container-fluid d-flex flex-md-row flex-column justify-content-between align-items-md-center gap-1 container-p-x py-4">
<div>
<a href="https://demos.themeselection.com/sneat-bootstrap-html-admin-template/html/vertical-menu-template/" target="_blank" class="footer-brand fw-bold">Sneat</a> ©
</div>
<div>
<a href="https://themeselection.com/license/" class="footer-link me-6" target="_blank">License</a>
<a href="javascript:void(0)" class="footer-link me-6">Help</a>
<a href="javascript:void(0)" class="footer-link me-6">Contact</a>
<a href="javascript:void(0)" class="footer-link">Terms & Conditions</a>
</div>
</div>
</footer>.layout-footer-fixed class to <html> tag for
Fixed footer.
Remove any background color like .bg-{color} class for transparent footer.
<footer class="footer">
<div class="container-fluid d-flex flex-md-row flex-column justify-content-between align-items-md-center gap-1 container-p-x py-4">
<div>
<a href="https://demos.themeselection.com/sneat-bootstrap-html-admin-template/html/vertical-menu-template/" target="_blank" class="footer-brand fw-bold">Sneat</a> ©
</div>
<div>
<a href="https://themeselection.com/license/" class="footer-link me-6" target="_blank">License</a>
<a href="javascript:void(0)" class="footer-link me-6">Help</a>
<a href="javascript:void(0)" class="footer-link me-6">Contact</a>
<a href="javascript:void(0)" class="footer-link">Terms & Conditions</a>
</div>
</div>
</footer>Here’s an example of footer with UI Elements.
<footer class="footer bg-light">
<div class="container-fluid d-flex flex-md-row flex-column justify-content-between align-items-md-center gap-1 container-p-x py-4">
<div>
<a href="https://demos.themeselection.com/sneat-bootstrap-html-admin-template/html/vertical-menu-template/" target="_blank" class="footer-brand fw-bold">Sneat</a> ©
</div>
<div>
<div class="form-check form-control-sm footer-link me-4">
<input class="form-check-input" type="checkbox" value="" id="customCheck2" checked />
<label class="form-check-label" for="customCheck2"> Show </label>
</div>
<div class="dropdown dropup footer-link me-4">
<button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Currency
</button>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="javascript:void(0);"><i class="icon-base bx bx-dollar"></i> USD</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="icon-base bx bx-euro"></i> Euro</a>
<a class="dropdown-item" href="javascript:void(0);"><i class="icon-base bx bx-pound"></i> Pound</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0);"><i class="icon-base bx bx-bitcoin"></i> Bitcoin</a>
</div>
</div>
<a href="javascript:void(0)" class="btn btn-sm btn-outline-danger"><i class="icon-base bx bx-log-out-circle me-1"></i>Logout</a>
</div>
</div>
</footer>
Theming the footer has never been easier thanks to the combination of theming classes and
background-color utilities. Then, customize with .bg-*
utilities.
<footer class="footer bg-{COLOR}">
<div class="container-fluid d-flex flex-md-row flex-column justify-content-between align-items-md-center gap-1 container-p-x py-4">
<div>
<a href="https://demos.themeselection.com/sneat-bootstrap-html-admin-template/html/vertical-menu-template/" target="_blank" class="footer-brand fw-bold">Sneat</a> ©
</div>
<div>
<a href="https://themeselection.com/license/" class="footer-link me-6" target="_blank">License</a>
<a href="javascript:void(0)" class="footer-link me-6">Help</a>
<a href="javascript:void(0)" class="footer-link me-6">Contact</a>
<a href="javascript:void(0)" class="footer-link">Terms & Conditions</a>
</div>
</div>
</footer>| Class | Value |
|---|---|
class="footer bg-{value}"
|
primary | secondary | success | danger | warning | info | light | dark | white | body-tertiary |
Here’s an example of footer theme. Use .bg-footer-theme class to change footer according to
theme.
<footer class="footer bg-footer-theme">
<div class="container-fluid d-flex flex-md-row flex-column justify-content-between align-items-md-center gap-1 container-p-x py-4">
<div>
<a href="https://demos.themeselection.com/sneat-bootstrap-html-admin-template/html/vertical-menu-template/" target="_blank" class="footer-brand fw-bold">Sneat</a> ©
</div>
<div>
<a href="https://themeselection.com/license/" class="footer-link me-6" target="_blank">License</a>
<a href="javascript:void(0)" class="footer-link me-6">Help</a>
<a href="javascript:void(0)" class="footer-link me-6">Contact</a>
<a href="javascript:void(0)" class="footer-link">Terms & Conditions</a>
</div>
</div>
</footer>Footer using SCSS variables to change the color of the footer.
Find footer's SCSS variables:
$footer-bg: var(--#{$prefix}paper-bg) !default;
$footer-color: var(--#{$prefix}body-color) !default;
$footer-border-width: 0 !default;
$footer-border-color: var(--#{$prefix}border-color) !default;
$footer-link-color: var(--#{$prefix}primary) !default;
$footer-link-hover-color: rgba(var(--#{$prefix}primary-rgb), .8) !default;
$footer-link-disabled-color: color-mix(in sRGB, var(--#{$prefix}base-color) 40%, var(--#{$prefix}paper-bg)) !default;
$footer-link-active-color: var(--#{$prefix}primary) !default;
$footer-brand-color: $footer-link-active-color !default;
$footer-brand-hover-color: color-mix(in sRGB, #{$footer-link-active-color} #{$bg-label-tint-amount}, var(--#{$prefix}paper-bg)) !default;
$footer-box-shadow: var(--#{$prefix}box-shadow-xl) !default;Footer SCSS variables are used for CSS variables. Footer CSS variables can be updated as per themes.
Find footer's CSS variables
--#{$prefix}footer-color: #{$footer-color};
--#{$prefix}footer-bg: #{$footer-bg};
--#{$prefix}footer-border-width: #{$footer-border-width};
--#{$prefix}footer-border-color: #{$footer-border-color};
--#{$prefix}footer-link-color: #{$footer-link-color};
--#{$prefix}footer-link-hover-color: #{$footer-link-hover-color};
--#{$prefix}footer-link-disabled-color: #{$footer-link-disabled-color};
--#{$prefix}footer-link-active-color: #{$footer-link-active-color};
--#{$prefix}footer-brand-color: #{$footer-brand-color};
--#{$prefix}footer-brand-hover-color: #{$footer-brand-hover-color};
--#{$prefix}footer-box-shadow: #{$footer-box-shadow};Advanced, responsive footer with more options and advanced stylings.
<footer class="footer bg-light">
<div class="container-fluid container-p-x pt-12 pb-6">
<div class="row">
<div class="col-12 col-sm-6 col-md-3 mb-6 mb-sm-0">
<h4 class="fw-bold mb-4">
<a href="https://demos.themeselection.com/sneat-bootstrap-html-admin-template/html/vertical-menu-template/" target="_blank" class="footer-brand">Sneat </a>
</h4>
<span>Get ready for better world</span>
<div class="social-icon my-4">
<a href="javascript:void(0)" class="btn btn-icon btn-sm btn-facebook me-2"><i class="icon-base bx bxl-facebook"></i></a>
<a href="javascript:void(0)" class="btn btn-icon btn-sm btn-twitter me-2"><i class="icon-base bx bxl-twitter"></i></a>
<a href="javascript:void(0)" class="btn btn-icon btn-sm btn-linkedin me-2"><i class="icon-base bx bxl-linkedin"></i></a>
<a href="javascript:void(0)" class="btn btn-icon btn-sm btn-github"><i class="icon-base bx bxl-github"></i></a>
</div>
<p class="pt-6">
<script>
document.write(new Date().getFullYear())
</script> © ThemeSelection
</p>
</div>
<div class="col-12 col-sm-6 col-md-3 mb-6 mb-md-0">
<h5>Company</h5>
<ul class="list-unstyled">
<li><a href="javascript:void(0)" class="footer-link d-block pb-2">About</a></li>
<li>
<a href="javascript:void(0)" class="footer-link d-block pb-2">Career <span class="badge bg-label-primary text-capitalize">We're hiring</span></a>
</li>
<li><a href="javascript:void(0)" class="footer-link d-block pb-2">Blog</a></li>
<li><a href="javascript:void(0)" class="footer-link d-block pb-2">Customers</a></li>
<li><a href="javascript:void(0)" class="footer-link d-block pb-2">Hire us</a></li>
<li><a href="javascript:void(0)" class="footer-link d-block pb-2">FAQs</a></li>
</ul>
</div>
<div class="col-12 col-sm-6 col-md-3 mb-6 mb-sm-0">
<h5>Products</h5>
<ul class="list-unstyled">
<li><a href="javascript:void(0)" class="footer-link d-block pb-2">Admin Template</a></li>
<li>
<a href="javascript:void(0)" class="footer-link d-block pb-2">UI Kit</a>
</li>
<li><a href="javascript:void(0)" class="footer-link d-block pb-2">Styleguide</a></li>
<li><a href="javascript:void(0)" class="footer-link d-block pb-2">API</a></li>
<li><a href="javascript:void(0)" class="footer-link d-block pb-2">Documentation</a></li>
<li><a href="javascript:void(0)" class="footer-link d-block pb-2">Changelog</a></li>
</ul>
</div>
<div class="col-12 col-sm-6 col-md-3">
<h5>Features</h5>
<ul class="list-unstyled">
<li><a href="javascript:void(0)" class="footer-link d-block pb-2">Affiliate Program</a></li>
<li>
<a href="javascript:void(0)" class="footer-link d-block pb-2">Integration</a>
</li>
<li><a href="javascript:void(0)" class="footer-link d-block pb-2">Support</a></li>
<li><a href="javascript:void(0)" class="footer-link d-block pb-2">Special Offers</a></li>
<li><a href="javascript:void(0)" class="footer-link d-block pb-2">Page Builder</a></li>
<li><a href="javascript:void(0)" class="footer-link d-block pb-2">Plans & Pricing</a></li>
</ul>
</div>
</div>
</div>
</footer>