Bootstrap Dark Footer

July 6, 2024

In web design, color schemes play a crucial role in setting the tone and mood of a website. While light and bright colors can convey a sense of openness and positivity, dark colors exude sophistication and elegance. Regarding footers, a dark color palette can add a touch of refinement and modernity, creating a striking contrast against the rest of the webpage. Enter the Free Bootstrap Dark Footer – a versatile resource that combines sleek design with ease of customization, allowing you to elevate your website’s aesthetic effortlessly.

Bootstrap 5 Component Update

We have updated this Bootstrap component to Bootstrap 5.3.3 and BSB Framework 2.0.4. We have rechecked this Bootstrap snippet on May 3, 2024.

Best Ready to Use Web Themes & Templates

Download Now

Bootstrap Dark Footer

The Free Bootstrap Dark Footer is a sleek and modern template built on the Bootstrap framework, a popular choice for responsive web design. With its dark color palette and customizable features, this free resource offers a simple yet effective solution for adding a touch of refinement to your website.

Preview Get Code

More Snippets Join BS Brain

Bootstrap 5 Templates

Bootstrap One Page Templates, Bootstrap 5 Templates, Free Bootstrap Templates

Introducing the Free Bootstrap Dark Footer

By embracing a dark color palette, you can create a sleek, modern footer that exudes elegance and sophistication. Whether you’re a blogger, business owner, or creative professional, incorporating a dark footer into your website is an intelligent strategy for elevating your online presence and leaving a lasting impression on visitors.

Key Features

Dark Color Palette: The footer template features a dark palette that exudes elegance and sophistication. This dark background provides a striking contrast against light-colored text and elements, ensuring readability and visual appeal.
Customizability: While the template comes with a predefined dark design, it also offers flexibility for customization. You can easily adjust colors, typography, and layout to match your website’s branding and design aesthetic.
Responsive Layout: Like all Bootstrap components, the footer template is fully responsive, ensuring that it looks great and functions seamlessly across devices of all sizes – from desktop computers to smartphones and tablets.
Essential Information: Despite its dark design, the footer still provides space for crucial information such as contact details, copyright notices, and links to important pages.

Features

Bootstrap 5
BSB Framework
Business Links
Dark Color Palette
Legal Links
Social Media Icons
HTML5 & CSS3
W3C Valid
Clean Snippet
Commented Code
Responsive Layout
Easy to Use
SEO Optimized
Cross Browser Compatible

Bootstrap 5 Components

Bootstrap Login Forms, Bootstrap 5 Snippets, Bootstrap Cards, Bootstrap Carousels, Bootstrap Heroes, Bootstrap Footers

HTML
CSS

<!-- Footer 11 - Bootstrap Brain Component -->
<footer class="py-sm-3 py-md-4 py-xl-6">
  <div class="container bg-black py-3 py-md-6 py-xl-9 py-xxl-10">
    <div class="row justify-content-center">
      <div class="col-11">

        <!-- Widgets - Bootstrap Brain Component -->
        <section class="mb-4 mb-md-5 mb-xl-9 mb-xxl-10">
          <div class="row gy-4 gy-md-0">
            <div class="col-6 col-md-3">
              <div class="link-wrapper">
                <h4 class="mb-3 fs-6 text-light">Clients</h4>
                <ul class="m-0 list-unstyled">
                  <li class="mb-1">
                    <a href="#!" class="link-opacity-75 link-underline-opacity-0 link-opacity-100-hover link-underline-opacity-100-hover link-offset-1 link-light">
                      Templates
                    </a>
                  </li>
                  <li class="mb-1">
                    <a href="#!" class="link-opacity-75 link-underline-opacity-0 link-opacity-100-hover link-underline-opacity-100-hover link-offset-1 link-light">
                      Enterprise
                    </a>
                  </li>
                  <li class="mb-1">
                    <a href="#!" class="link-opacity-75 link-underline-opacity-0 link-opacity-100-hover link-underline-opacity-100-hover link-offset-1 link-light">
                      Extensions
                    </a>
                  </li>
                  <li class="mb-1">
                    <a href="#!" class="link-opacity-75 link-underline-opacity-0 link-opacity-100-hover link-underline-opacity-100-hover link-offset-1 link-light">
                      Managers
                    </a>
                  </li>
                  <li>
                    <a href="#!" class="link-opacity-75 link-underline-opacity-0 link-opacity-100-hover link-underline-opacity-100-hover link-offset-1 link-light">
                      How to Hire
                    </a>
                  </li>
                </ul>
              </div>
            </div>
            <div class="col-6 col-md-3">
              <div class="link-wrapper">
                <h4 class="mb-3 fs-6 text-light">Talent</h4>
                <ul class="m-0 list-unstyled">
                  <li class="mb-1">
                    <a href="#!" class="link-opacity-75 link-underline-opacity-0 link-opacity-100-hover link-underline-opacity-100-hover link-offset-1 link-light">
                      Operations
                    </a>
                  </li>
                  <li class="mb-1">
                    <a href="#!" class="link-opacity-75 link-underline-opacity-0 link-opacity-100-hover link-underline-opacity-100-hover link-offset-1 link-light">
                      Marketing
                    </a>
                  </li>
                  <li class="mb-1">
                    <a href="#!" class="link-opacity-75 link-underline-opacity-0 link-opacity-100-hover link-underline-opacity-100-hover link-offset-1 link-light">
                      Finance
                    </a>
                  </li>
                  <li class="mb-1">
                    <a href="#!" class="link-opacity-75 link-underline-opacity-0 link-opacity-100-hover link-underline-opacity-100-hover link-offset-1 link-light">
                      Product
                    </a>
                  </li>
                  <li>
                    <a href="#!" class="link-opacity-75 link-underline-opacity-0 link-opacity-100-hover link-underline-opacity-100-hover link-offset-1 link-light">
                      Support
                    </a>
                  </li>
                </ul>
              </div>
            </div>
            <div class="col-6 col-md-3">
              <div class="link-wrapper">
                <h4 class="mb-3 fs-6 text-light">Resources</h4>
                <ul class="m-0 list-unstyled">
                  <li class="mb-1">
                    <a href="#!" class="link-opacity-75 link-underline-opacity-0 link-opacity-100-hover link-underline-opacity-100-hover link-offset-1 link-light">
                      Community
                    </a>
                  </li>
                  <li class="mb-1">
                    <a href="#!" class="link-opacity-75 link-underline-opacity-0 link-opacity-100-hover link-underline-opacity-100-hover link-offset-1 link-light">
                      Resources
                    </a>
                  </li>
                  <li class="mb-1">
                    <a href="#!" class="link-opacity-75 link-underline-opacity-0 link-opacity-100-hover link-underline-opacity-100-hover link-offset-1 link-light">
                      Learning
                    </a>
                  </li>
                  <li class="mb-1">
                    <a href="#!" class="link-opacity-75 link-underline-opacity-0 link-opacity-100-hover link-underline-opacity-100-hover link-offset-1 link-light">
                      Webinars
                    </a>
                  </li>
                  <li>
                    <a href="#!" class="link-opacity-75 link-underline-opacity-0 link-opacity-100-hover link-underline-opacity-100-hover link-offset-1 link-light">
                      Customers
                    </a>
                  </li>

                </ul>
              </div>
            </div>
            <div class="col-6 col-md-3">
              <div class="link-wrapper">
                <h4 class="mb-3 fs-6 text-light">Company</h4>
                <ul class="m-0 list-unstyled">
                  <li class="mb-1">
                    <a href="#!" class="link-opacity-75 link-underline-opacity-0 link-opacity-100-hover link-underline-opacity-100-hover link-offset-1 link-light">
                      About us
                    </a>
                  </li>
                  <li class="mb-1">
                    <a href="#!" class="link-opacity-75 link-underline-opacity-0 link-opacity-100-hover link-underline-opacity-100-hover link-offset-1 link-light">
                      Leadership
                    </a>
                  </li>
                  <li class="mb-1">
                    <a href="#!" class="link-opacity-75 link-underline-opacity-0 link-opacity-100-hover link-underline-opacity-100-hover link-offset-1 link-light">
                      Careers
                    </a>
                  </li>
                  <li class="mb-1">
                    <a href="#!" class="link-opacity-75 link-underline-opacity-0 link-opacity-100-hover link-underline-opacity-100-hover link-offset-1 link-light">
                      Services
                    </a>
                  </li>
                  <li class="mb-1">
                    <a href="#!" class="link-opacity-75 link-underline-opacity-0 link-opacity-100-hover link-underline-opacity-100-hover link-offset-1 link-light">
                      Contact Us
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </section>

        <!-- Link - Bootstrap Brain Component -->
        <div class="mb-3">
          <div class="row">
            <div class="col-12">
              <div class="link-wrapper">
                <ul class="m-0 list-unstyled d-flex justify-content-center justify-content-md-start gap-3">
                  <li>
                    <a href="#!" class="fs-7 link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light">
                      Terms
                    </a>
                  </li>
                  <li>
                    <a href="#!" class="fs-7 link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light">
                      Privacy
                    </a>
                  </li>
                  <li>
                    <a href="#!" class="fs-7 link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light">
                      Advertise
                    </a>
                  </li>
                  <li>
                    <a href="#!" class="fs-7 link-underline-opacity-0 link-opacity-75-hover link-underline-opacity-100-hover link-offset-1 link-light">
                      Media
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        <!-- Copyright - Bootstrap Brain Component -->
        <div class="border-top border-dark-subtle pt-3">
          <div class="row gy-3 align-items-center">
            <div class="col-12 col-md-6">
              <div class="copyright-wrapper d-block mb-1 fs-8 text-light text-center text-md-start">
                &copy; 2024. All Rights Reserved.
              </div>
              <div class="credit-wrapper d-block text-secondary fs-9 text-light text-center text-md-start">
                Built by<a href="https://bootstrapbrain.com/" class="link-light text-decoration-none">
                  BootstrapBrain</a> with <span class="text-primary">&#9829;</span>
              </div>
            </div>
            <div class="col-12 col-md-6">
              <div class="social-media-wrapper">
                <ul class="m-0 list-unstyled d-flex gap-3 justify-content-center justify-content-md-end">
                  <li>
                    <a href="#!" class="link-opacity-75-hover link-light">
                      <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" class="bi bi-youtube" viewBox="0 0 16 16">
                        <path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.01 2.01 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.01 2.01 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31 31 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.01 2.01 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A100 100 0 0 1 7.858 2zM6.4 5.209v4.818l4.157-2.408z" />
                      </svg>
                    </a>
                  </li>
                  <li>
                    <a href="#!" class="link-opacity-75-hover link-light">
                      <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" class="bi bi-facebook" viewBox="0 0 16 16">
                        <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951" />
                      </svg>
                    </a>
                  </li>
                  <li>
                    <a href="#!" class="link-opacity-75-hover link-light">
                      <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" class="bi bi-twitter" viewBox="0 0 16 16">
                        <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334q.002-.211-.006-.422A6.7 6.7 0 0 0 16 3.542a6.7 6.7 0 0 1-1.889.518 3.3 3.3 0 0 0 1.447-1.817 6.5 6.5 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.32 9.32 0 0 1-6.767-3.429 3.29 3.29 0 0 0 1.018 4.382A3.3 3.3 0 0 1 .64 6.575v.045a3.29 3.29 0 0 0 2.632 3.218 3.2 3.2 0 0 1-.865.115 3 3 0 0 1-.614-.057 3.28 3.28 0 0 0 3.067 2.277A6.6 6.6 0 0 1 .78 13.58a6 6 0 0 1-.78-.045A9.34 9.34 0 0 0 5.026 15" />
                      </svg>
                    </a>
                  </li>
                  <li>
                    <a href="#!" class="link-opacity-75-hover link-light">
                      <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16">
                        <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z" />
                      </svg>
                    </a>
                  </li>
                  <li>
                    <a href="#!" class="link-opacity-75-hover link-light">
                      <svg xmlns="http://www.w3.org/2000/svg" width="" height="22" fill="currentColor" class="bi bi-instagram" viewBox="0 0 16 16">
                        <path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334" />
                      </svg>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</footer>

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/utilities/font-size/font-size.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/utilities/margin/margin.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/utilities/padding/padding.css">