Footersv5.x

Footers show ancillary links on each page

Bootstrap v5.x | Footers


<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

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;
}

Custom JS

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?