Template footer options with responsive and all the options.
Here’s an example of basic footer.
<footer class="content-footer footer bg-lighter">
<div class="container-fluid d-flex flex-md-row flex-column justify-content-between align-items-md-center gap-1 py-4">
<div>
<a href="https://demos.themeselection.com/materio-bootstrap-html-admin-template/html/vertical-menu-template/" target="_blank" class="footer-text fw-medium">Materio</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 .bg-footer-theme or any other background color like .bg-{color} class for
transparent footer.
<footer class="content-footer footer">
<div class="container-fluid d-flex flex-md-row flex-column justify-content-between align-items-md-center gap-1 py-4">
<div>
<a href="https://demos.themeselection.com/materio-bootstrap-html-admin-template/html/vertical-menu-template/" target="_blank" class="footer-text fw-medium">Materio</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="content-footer footer bg-lighter">
<div class="container-fluid d-flex flex-md-row flex-column justify-content-between align-items-md-center gap-1 py-4">
<div>
<a href="https://demos.themeselection.com/materio-bootstrap-html-admin-template/html/vertical-menu-template/" target="_blank" class="footer-text fw-medium">Materio</a> ©
</div>
<div>
<div class="form-check 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='ri-money-dollar-circle-line me-2'></i> USD</a>
<a class="dropdown-item" href="javascript:void(0);"><i class='ri-money-euro-circle-line me-2'></i> Euro</a>
<a class="dropdown-item" href="javascript:void(0);"><i class='ri-money-pound-circle-line me-2'></i> Pound</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void(0);"><i class='ri-btc-line me-2'></i> Bitcoin</a>
</div>
</div>
<a href="javascript:void(0)" class="btn btn-sm btn-outline-danger"><i class='ri-logout-box-r-line 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="content-footer footer bg-{COLOR}">
<div
class="container-fluid d-flex flex-md-row flex-column justify-content-between align-items-md-center gap-1 py-4">
<div>
<a href="https://demos.themeselection.com/materio-bootstrap-html-admin-template/html/vertical-menu-template/" target="_blank" class="footer-text fw-medium">Materio</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 |
Here’s an example of footer theme. Use .bg-footer-theme class to change footer according to
theme.
<footer class="content-footer footer bg-footer-theme">
<div class="container-fluid d-flex flex-md-row flex-column justify-content-between align-items-md-center gap-1 py-4">
<div>
<a href="https://demos.themeselection.com/materio-bootstrap-html-admin-template/html/vertical-menu-template/" target="_blank" class="footer-text fw-medium">Materio</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 is the theme basic footer mixin which allow you to easily create footer by adding your own class and colors.
@mixin template-footer-style($parent, $bg, $color: null, $active-color: null, $border: null)@include template-footer-style('.bg-footer-theme', $body-bg, $color: $body-color, $active-color: $headings-color);Advanced, responsive footer with more options and advanced stylings.
<footer class="content-footer footer bg-lighter">
<div class="container-fluid 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-medium mb-4"><a href="https://demos.themeselection.com/materio-bootstrap-html-admin-template/html/vertical-menu-template/" target="_blank" class="footer-text">Materio </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"><i class='ri-facebook-fill ri-20px'></i></a>
<a href="javascript:void(0)" class="ms-2 btn btn-icon btn-sm btn-twitter"><i class='ri-twitter-fill ri-20px'></i></a>
<a href="javascript:void(0)" class="ms-2 btn btn-icon btn-sm btn-linkedin"><i class='ri-linkedin-box-fill ri-20px'></i></a>
<a href="javascript:void(0)" class="ms-2 btn btn-icon btn-sm btn-github"><i class='ri-github-fill ri-20px'></i></a>
</div>
<p class="pt-4">
<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="https://themeselection.com/license/" class="footer-link me-6" target="_blank">License</a></li>
</ul>
</div>
</div>
</div>
</footer>