Footers - Bootstrap Design System

Basic Footer

A simple footer with centered text.

<footer class="py-3 border-top">
    <p class="text-center text-muted mb-0">© 2024 Company Name. All rights reserved.</p>
</footer>

Footer with Columns

Multi-column footer with links organized by category.

Three Column Footer

<footer class="py-5 border-top">
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <h5>About</h5>
                <p class="text-muted">Description...</p>
            </div>
            <div class="col-md-4">
                <h5>Quick Links</h5>
                <ul class="list-unstyled">
                    <li><a href="#" class="text-muted">Home</a></li>
                </ul>
            </div>
            <div class="col-md-4">
                <h5>Resources</h5>
                <ul class="list-unstyled">
                    <li><a href="#" class="text-muted">Docs</a></li>
                </ul>
            </div>
        </div>
        <div class="border-top pt-3">
            <p class="text-center text-muted">© 2024 Company Name</p>
        </div>
    </div>
</footer>

Four Column Footer

<footer class="py-5 border-top">
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <h5>Company</h5>
                <ul class="list-unstyled">
                    <li><a href="#">About Us</a></li>
                </ul>
            </div>
            <!-- Repeat for other columns -->
        </div>
    </div>
</footer>

Footer with Social Links

Footer including social media icon links.

<footer class="py-4 border-top">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-6">
                <p class="text-muted mb-0">© 2024 Company Name</p>
            </div>
            <div class="col-md-6 text-md-end">
                <a href="#" class="text-muted me-3"><i class="bi bi-facebook fs-4"></i></a>
                <a href="#" class="text-muted me-3"><i class="bi bi-twitter-x fs-4"></i></a>
                <a href="#" class="text-muted me-3"><i class="bi bi-instagram fs-4"></i></a>
                <a href="#" class="text-muted me-3"><i class="bi bi-linkedin fs-4"></i></a>
                <a href="#" class="text-muted"><i class="bi bi-github fs-4"></i></a>
            </div>
        </div>
    </div>
</footer>

Centered Social Footer

<footer class="py-4 border-top">
    <div class="text-center">
        <div class="mb-3">
            <a href="#" class="btn btn-outline-secondary btn-sm me-2">
                <i class="bi bi-facebook"></i>
            </a>
            <a href="#" class="btn btn-outline-secondary btn-sm">
                <i class="bi bi-twitter-x"></i>
            </a>
        </div>
        <p class="text-muted mb-0">© 2024 Company Name</p>
    </div>
</footer>

Footer with Newsletter

Footer with newsletter signup form.

<footer class="py-5 border-top">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <h5>Subscribe to our Newsletter</h5>
                <p class="text-muted">Get the latest updates.</p>
                <form class="d-flex gap-2">
                    <input type="email" class="form-control" placeholder="Email">
                    <button class="btn btn-primary">Subscribe</button>
                </form>
            </div>
            <!-- Additional columns -->
        </div>
        <hr>
        <p class="text-center text-muted">© 2024 Company Name</p>
    </div>
</footer>

Dark Footer

Footer with dark background styling.

<footer class="bg-dark text-white py-5">
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <h5>Company Name</h5>
                <p class="text-white-50">Description...</p>
            </div>
            <div class="col-md-4">
                <h6>Quick Links</h6>
                <ul class="list-unstyled">
                    <li><a href="#" class="text-white-50">Home</a></li>
                </ul>
            </div>
            <div class="col-md-4">
                <h6>Follow Us</h6>
                <a href="#" class="text-white"><i class="bi bi-facebook"></i></a>
            </div>
        </div>
        <hr class="border-secondary">
        <p class="text-center text-white-50">© 2024 Company Name</p>
    </div>
</footer>

Sticky Footer

Footer that always sticks to the bottom of the page.

For sticky footer, wrap your page content in a flex container with min-height: 100vh and use mt-auto on the footer.

<!-- Page wrapper -->
<div class="d-flex flex-column min-vh-100">

    <!-- Header -->
    <header>
        <!-- Your header content -->
    </header>

    <!-- Main content -->
    <main class="flex-grow-1">
        <!-- Your page content -->
    </main>

    <!-- Sticky Footer -->
    <footer class="mt-auto py-3 bg-light border-top">
        <div class="container">
            <p class="text-center text-muted mb-0">© 2024 Company Name</p>
        </div>
    </footer>

</div>