Multiple Examples of Modern Footer Design Templates

Updated on ... 29th April 2023

A website footer is the bottom section of a webpage that typically contains information such as copyright notices, legal disclaimers, contact information, links to important pages, and social media icons. It is usually present on every page of a website and serves as a navigational tool for users. The design and content of a website footer can vary depending on the purpose of the website and its target audience.

In this tutorial, we will see multiple examples of modern footer design using Bootstrap 5

Example 1: Dark footer with social and subscription form


                                                                

                                                                

                                                                <!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <!-- font awesome  -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
        integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

                                                                <section class="ath_footer_top" id="subscribe">
        <div class="container-fluid ">
            <div class="row">
                <div class="col-md-5 d-flex subscribe-left p-lg-5 py-sm-5 py-4">
                    <div class="news-icon mr-3">
                        <span class="fa fa-paper-plane" aria-hidden="true"></span>
                    </div>
                    <div class="text">
                        <h3>Subscribe To Our Newsletter</h3>
                    </div>
                </div>
                <div class="col-md-7 subscribe-right p-lg-5 py-sm-5 py-4">
                    <form action="#" method="post">
                        <input type="email" name="email" placeholder="Enter your email here" required="">
                        <button class="btn1"><span class="fa fa-paper-plane" aria-hidden="true"></span></button>
                    </form>
                    <p>we never share your email with anyone else</p>
                </div>
            </div>
        </div>
    </section>
    <footer class="ath_footer_outer">
        <div class="footer-layer py-sm-5 pt-5 pb-3">
            <div class="container py-md-3">
                <div class="footer-grid_section text-center">
                    <div class="footer-title mb-3">
                        <a href="#"><span class="fa fa-gift"></span> About Us</a>
                    </div>
                    <div class="footer-text">
                        <p>Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Nulla quis lorem
                            ipnut libero malesuada feugiat.
                            Lorem ipsum dolor sit amet, consectetur elit.</p>
                    </div>
                    <ul class="social_section_1info">
                        <li class="mb-2 facebook"><a href="#"><i class="fab fa-twitter"></i></a></li>
                        <li class="mb-2 twitter"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                        <li class="google"><a href="#"><i class="fab fa-twitter"></i></a></li>
                        <li class="linkedin"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                        <li class="pinterest"><a href="#"><i class="fab fa-twitter"></i></a></li>
                        <li class="vimeo"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                    </ul>
                </div>
            </div>

        </div>
    </footer>

    <section class="copyright">
        <div class="container py-4">
            <div class="row bottom">
                <ul class="col-lg-6 links p-0">
                    <li><a href="#" class="">Happy Couples </a></li>
                    <li><a href="#" class="">Why Choose Us</a></li>
                    <li><a href="#" class="">Stats </a></li>
                    <li><a href="#" class="">Services </a></li>
                </ul>
                <div class="col-lg-6 copy-right p-0">
                    <p class="">© 2021 All rights reserved | Design by
                        <a href="https://abdultechhub.com"> abdultechhub.com</a>
                    </p>
                </div>
            </div>
        </div>
    </section>


                                                                

                                                                

                                                                .ath_footer_outer {
            background: url(img/footer.jpg)no-repeat center;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            -ms-background-size: cover;
            background-size: cover;
        }

        .ath_footer_top {
            margin-top: 180px;

        }

        .subscribe-left {
            background: #b176ff;
        }

        .news-icon {
            width: 20%;
            text-align: center;
        }

        .news-icon span.fa {
            color:
                #fff;
            font-size: 55px;
            margin-top: 20px;
        }

        .subscribe-right {
            background:
                #f6f6f6;
        }

        .ath_footer_top form {
            width: 80%;
            margin-top: 10px;
        }

        .ath_footer_top form input[type="email"] {
            outline: none;
            padding: 15px 25px;
            color:
                #333;
            font-size: 15px;
            width: 90%;
            border: none;
            background:
                #fff;
            letter-spacing: 1px;
        }

        .ath_footer_top button.btn1 {
            color:
                #fff;
            border: none;
            padding: 13px 0;
            outline: none;
            text-align: center;
            text-decoration: none;
            background:
                #333;
            cursor: pointer;
            -webkit-transition: 0.5s all;
            -moz-transition: 0.5s all;
            -o-transition: 0.5s all;
            -ms-transition: 0.5s all;
            transition: 0.5s all;
            float: right;
            width: 10%;
        }

        .ath_footer_top h3 {
            font-size: 40px;
            color:
                #fff;
            letter-spacing: 1px;
        }

        p {
            margin: 0;
            font-size: 15px;
            line-height: 2em;
            letter-spacing: 1px;
            color:
                #666;
        }

        .footer-layer {
            background:
                rgba(0, 0, 0, 0.6);
        }

        .footer-grid_section {
            width: 70%;
            margin: auto;
        }

        .footer-title a {
            font-size: 33px;
            text-transform: capitalize;
            font-weight: 600;
            color:
                #eee;
        }

        .footer-text p {
            color:
                #aaa;
        }

        ul.social_section_1info {
            margin-top: 20px;
        }

        ul {
            margin: 0;
            padding: 0;
        }

        ul.social_section_1info li {
            display: inline-block;
        }

        ul.social_section_1info a {
            margin-right: 4px;
            width: 40px;
            height: 40px;
            display: block;
            background:
                rgba(0, 0, 0, 0.4);
            text-align: center;
            line-height: 40px;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms-border-radius: 50%;
            -o-border-radius: 50%;
            color:
                #fff;
        }

        ul.social_section_1info a:hover {
            background: #b176ff;
            color: #fff;
        }

        .ath_footer_top button.btn1:hover {
            background: #b176ff;
        }

        .copyright {
            background:
                #111;
        }

        ul.links a,
        .copy-right p,
        .copy-right p a {
            color:
                #777;
            letter-spacing: 1px;
            text-transform: capitalize;
        }

        ul.links li {
            display: inline-block;
        }

        ul.links a {
            padding: 0 10px;
            display: inline-block;
        }

        ul.links a,
        .copy-right p,
        .copy-right p a {
            color:
                #777;
            letter-spacing: 1px;
            text-transform: capitalize;
        }

Multiple Examples of Modern Footer Design Templates

Example 2. Footer design with vibrant hover effect, go top button and animation effect


                                                                

                                                                

                                                                <!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<!-- font awsome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
    integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />

<!-- animate css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" />

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<!-- wow js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>

                                                                <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    eius
                    numquam, cupiditate similique ex excepturi quibusdam fuga officia, nostrum ullam minima, sunt
                    tenetur
                    voluptatem!</p>
                <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    eius
                    numquam, cupiditate similique ex excepturi quibusdam fuga officia, nostrum ullam minima, sunt
                    tenetur
                    voluptatem!</p>
            </div>
        </div>
    </div>
    <footer id="footer_outer" class="bg-light" style="margin-top: 200px;">
        <section class="footer_back">
            <div class="container-fluid">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-12" style="min-height: 230px;"></div>
                    </div>
                </div>
            </div>

            <!-- icon row -->
            <div class="container-fluid mb-4">
                <div class="row d-flex justify-content-center">
                    <div class="col-md-3 text-center text-white py-2">
                        <div class="ftr_icons_outer">
                            <div class="ftr_icons">
                                <i class="fa-solid fa-phone-volume"></i>
                            </div>
                        </div>
                        <h2 class="text-white">Lorem ipsum dolor</h2>
                    </div>
                    <div class="col-md-3 text-center text-white py-2">
                        <div class="ftr_icons_outer">
                            <div class="ftr_icons">
                                <i class="fa-solid fa-envelope-open-text"></i>
                            </div>
                        </div>
                        <h2 class="text-white">Lorem ipsum dolor</h2>
                        <!-- <p>Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum</p> -->
                    </div>
                    <div class="col-md-3 text-center text-white py-2">
                        <div class="ftr_icons_outer">
                            <div class="ftr_icons">
                                <i class="fa-brands fa-whatsapp"></i>
                            </div>
                        </div>
                        <h2 class="text-white">Lorem ipsum dolor</h2>
                        <!-- <p >Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum</p> -->
                    </div>
                </div>
            </div>

            <div class="container-fluid" style="background: 
      rgba(0, 0, 0, 0.7); color: 
      #ededed;">
                <div class="row">
                    <div class="col-sm-12 text-center text-white py-2">
                        <p class="m-0">&copy; 2019 all right reserved design and developed by Abdultechhub.com</p>
                    </div>
                </div>
            </div>
        </section>

        <section class="footer_front">
            <div class="container-fluid">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-12 ftr_up_cta p-5 rounded text-center text-white wow fadeInUp">
                            <h2 class="mt-3">Lets work together</h2>

                            <span class="single_bdr"></span>
                            <p class="mt-4" style="font-size: 18px;">
                                <strong>
                                    We’re currently taking on new projects. Would you like to discuss yours ? Call us
                                    <br />
                                    at +1-123-456-7890 or mail us at [email protected]
                                </strong>
                            </p>

                            <a href="javascript:;" class="my_button_effect mt-4 mr-4 wow fadeInLeft delay-3"> GET IN
                                TOUCH </a>

                            <a href="javascript:;"
                                class="my_button_effect btn_fill mt-4 mr-4 wow fadeInRight delay-3"><span> Read More
                                </span> </a>
                        </div>

                        <div class="col-sm-12"></div>
                    </div>
                </div>
            </div>
        </section>
    </footer>

    <div id="go_top" class="animated fadeInUp infinite">
        <i class="fa-solid fa-arrow-up-from-bracket"></i>
    </div>


                                                                

                                                                

                                                                /*footer styling start*/
        #footer_outer .footer_back {
            background-color:
                #f8f9fa;
            background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(../images/bg1.jpg);
            background-position: center;
            background-attachment: fixed;
            width: 100%;
            clip-path: polygon(57% 0, 88% 13%, 100% 0, 100% 100%, 0 100%, 0 9%, 3% 15%);
        }

        #footer_outer .copy_right_tag {
            background: rgba(0, 0, 0.2);
        }

        #footer_outer .footer_front .ftr_up_cta {
            background: linear-gradient(100deg, #e95095, #7049ba);
            margin-top: -605px;
            max-height: 350px;
            clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 12%);
            /* background: linear-gradient(270deg, rgba(46,115,232,1) 0%,
            rgba(133,57,217,1) 100%); */
            opacity: 0.95;
        }

        .ftr_icons_outer {
            width: 70px;
            height: 70px;
            padding: 10px;
            border-radius: 100%;
            margin: auto;
            border: 2px solid #e95095;
            background: rgba(255, 255, 255, 0.45);
            transition: all 0.3s ease-in;
        }

        .ftr_icons_outer .ftr_icons {
            width: 46px;
            height: 46px;
            border: 0px solid #fff;
            background: #222;
            border-radius: 100%;
            transition: all 0.3s ease-out;
            line-height: 52px;
            text-align: center;
        }

        .ftr_icons_outer .ftr_icons i {
            font-size: 24px;
        }

        #footer_outer .footer_back h2 {
            margin-top: 20px;
        }

        .ftr_icons_outer:hover {
            background: #222;
            width: 15px;
        }

        .ftr_icons_outer:hover .ftr_icons {
            background: rgba(255, 255, 255, 9);
            color: #7049ba;
        }

        /* #footer_outer .footer_back h2{
        color: #e95095;
    }*/

        .my_button_effect {
            background: none;
            border: 2px solid #f8f9fa;
            border-radius: 4px;
            color:
                #fff;
            display: inline-block;
            font-size: 1.1em;
            font-weight: bold;
            margin: 1em auto;
            padding: 0.5em 2em;
            position: relative;
            text-transform: uppercase;
            overflow: hidden;
            text-align: center;
            text-decoration: none;
            font-style: italic;
        }

        .my_button_effect::before,
        .my_button_effect::after {
            background:
                #f8f9fa;
            content: "";
            position: absolute;
            z-index: -1;
            transition: all 0.3s;
            height: 0;
            left: 50%;
            top: 50%;
            width: 0;
        }

        .my_button_effect:hover {
            color:
                #7049ba !important;
            outline: none !important;
            text-decoration: underline;
        }

        .my_button_effect.dark:hover {
            color:
                #fff !important;
        }

        .my_button_effect:focus {
            outline: none !important;
        }

        .my_button_effect:hover:after {
            height: 100%;
            left: 0;
            top: 0;
            width: 100%;
        }

        .btn_fill {
            background-color:
                #111;
            color:
                #fff;
            border: 2px solid #111;
        }

        .btn_fill:hover {
            background-color:
                #fff;
            border: 2px solid #fff;
        }

        .btn_fill.dark {
            background-color:
                #111;
            border: 2px solid #111;
            color:
                #fff;
        }

        #go_top {
            position: fixed;
            right: 20px;
            bottom: 40px;
            cursor: pointer;
            background: #ab82ed;
            padding: 5px;
            border-radius: 5px;
        }

        #go_top img:hover {
            box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
        }

        @media only screen and (max-width:748px) {
            #footer_outer .footer_front .ftr_up_cta {
                margin-top: -906px;
                max-height: 350px;
            }

            #footer_outer .footer_back {
                clip-path: polygon(57% 0, 90% 5%, 100% 0, 100% 100%, 0 100%, 0 0%, 10% 3%);
            }
        }


                                                                

                                                                   $(document).ready(function () {
            $("#go_top").hover(function () {
                //alert("yyyy");
                $("#go_top").css({ "animation-play-state": "paused", "opacity": "1" });
            });
            $("#go_top").mouseout(function () {
                $("#go_top").css("animation-play-state", "running");
            });


            $("#go_top").click(function () {
                $("html, body").animate({ scrollTop: 0 }, "100");
            });
        });


        $(document).ready(function () {
            // WOW animation initialize
            new WOW().init();
        });