<footer class="bg-light p-4">
<div class="container">
<div class="row">
<div class="col-md-4 col-lg-3 mb-4">
<h4 class="text-dark">Brand</h4>
<p class="small text-emphasis mb-1"><em>The tagline goes here!</em></p>
<ul class="list-unstyled small text-muted my-3">
<li>Address 1</li>
<li>Address 2</li>
<li class="mb-2">City, State ZIP</li>
<li>TEL (999) 123-4567</li>
<li>FAX (999) 890-1234</li>
</ul>
</div>
<div class="col-4 col-md-4 col-lg-3 my-3">
<h6 class="text-dark text-center">Heading</h6>
<ul class="nav flex-column text-center">
<li class="nav-item"><a class="nav-link p-0 small" href="#">Link 1</a></li>
<li class="nav-item"><a class="nav-link p-0 small" href="#">Link 2</a></li>
<li class="nav-item"><a class="nav-link p-0 small" href="#">Link 3</a></li>
<li class="nav-item"><a class="nav-link p-0 small" href="#">Link 4</a></li>
<li class="nav-item"><a class="nav-link p-0 small" href="#">Link 5</a></li>
</ul>
</div>
<div class="col-4 col-md-4 col-lg-3 my-3">
<h6 class="text-dark text-center">Heading</h6>
<ul class="nav flex-column text-center">
<li class="nav-item"><a class="nav-link p-0 small" href="#">Link 1</a></li>
<li class="nav-item"><a class="nav-link p-0 small" href="#">Link 2</a></li>
<li class="nav-item"><a class="nav-link p-0 small" href="#">Link 3</a></li>
<li class="nav-item"><a class="nav-link p-0 small" href="#">Link 4</a></li>
<li class="nav-item"><a class="nav-link p-0 small" href="#">Link 5</a></li>
</ul>
</div>
</div>
<hr>
<div class="row justify-content-between">
<div class="col-12 col-md-8">
<ul class="nav justify-content-start mb-2">
<li class="nav-item mx-1"><a class="nav-link p-0 small" href="#">Link 1</a>
</li>
<li class="nav-item mx-1"><a class="nav-link p-0 small" href="#">Link 2</a>
</li>
<li class="nav-item mx-1"><a class="nav-link p-0 small" href="#">Link 3</a>
</li>
<li class="nav-item mx-1"><a class="nav-link p-0 small" href="#">Link 4</a>
</li>
<li class="nav-item mx-1"><a class="nav-link p-0 small" href="#">Link 5</a>
</li>
</ul>
</div>
<div class="d-flex col-12 col-md-4 justify-content-md-end">
<a href="#" class="mx-2"><i class="fab fa-github"></i></a>
<a href="#" class="mx-2"><i class="fab fa-apple"></i></a>
<a href="#" class="mx-2"><i class="fab fa-linkedin"></i></a>
<a href="#" class="mx-2"><i class="fab fa-facebook"></i></a>
</div>
</div>
<div class="col-sm-12">
<p class="fs-6 text-start text-muted mt-4">© {insert explicit year, or insert JS to add year dynamically} Brand</p>
</div>
</div>
</footer>
Custom CSS is required to style the background and text with custom colors.
.custom-background-color {
background-color: #0C2340 !important;
}
.custom-text-color {
color: #FFFFFF !important;
}
If you wish to have the copyright year update automatically, simply replace the explicit date with the following code.
<script> function updateCurrentYear() { const el = document.getElementById('current-year'); if (el) el.textContent = new Date().getFullYear(); } document.addEventListener('DOMContentLoaded', updateCurrentYear); </script>
This will reset the page. Are you sure?