Footer in Bootstrap 4 With Subscription Form

Footer in Bootstrap 4 with a subscription form. The bootstrap footer is ready to use in your project, you just need to copy and paste this code snippet.

HTML

<footer class="bg-success text-white">
    <div class="container">         
        <div class="row">
            <div class="col-md-3 col-sm-6">
                <h3>Quick Links</h3>
                <ul>
                    <li><a href="#">Link First</a></li>
                    <li><a href="#">Link Second</a></li>
                    <li><a href="#">Link Third</a></li>
                    <li><a href="#">Link Fourth</a></li>
                    <li><a href="#">Link Fifth</a></li>
                </ul>
            </div>
            <div class="col-md-3 col-sm-6">
                <h3>Our Services</h3>
                <ul>
                    <li><a href="#">Link First</a></li>
                    <li><a href="#">Link Second</a></li>
                    <li><a href="#">Link Third</a></li>
                    <li><a href="#">Link Fourth</a></li>
                    <li><a href="#">Link Fifth</a></li>
                </ul>
            </div>
            <div class="col-md-3 col-sm-6">
                <h3>Our Programs</h3>
                <ul>
                    <li><a href="#">Link First</a></li>
                    <li><a href="#">Link Second</a></li>
                    <li><a href="#">Link Third</a></li>
                    <li><a href="#">Link Fourth</a></li>
                    <li><a href="#">Link Fifth</a></li>
                </ul>
            </div>
            <div class="col-md-3 col-sm-6">
                <h3 class="mb-4">markuptag.com</h3>
                <form action="">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Enter Your Email Id*">
                        <div class="input-group-append">
                            <button class="btn btn-dark" type="button">Submit</button>
                        </div>
                    </div>
                </form>
                <p>Subscribe Now and stay updated</p>
            </div>

            <!-- Copyright section -->
            <div class="col-12">
                <hr>
                <div class="row">
                    <div class="col-md-7">
                        <!-- Social Links -->
                        <div class="follow-us">
                            <a href="#"><i class="fab fa-facebook-f"></i> Facebook</a>
                            <a href="#"><i class="fab fa-twitter"></i> Twitter</a>
                            <a href="#"><i class="fab fa-instagram"></i> Instagram</a>
                            <a href="#"><i class="fab fa-linkedin-in"></i> Linkedin</a>
                        </div>
                    </div>
                    <div class="col-md-5">
                        <p class="text-right">© 2019 Template <a href="www.markuptag.com" target="_blank" rel="noopener noreferrer">markuptag.com</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>

CSS

footer {
    padding: 50px 0px 20px;
}
footer ul {
    padding: 0px;
}
footer ul li {
    list-style: none;
}
footer ul li a {
    padding: 3px 0px;
    display: block;
}
footer a {
    font-size: 16px;
    color: #fff;
    text-decoration: none;
}
footer a:hover {
    color: #FFEB3B;
    text-decoration: none;
}
footer p {
    color: #fff;
    margin: 0;
    font-size: 16px;
    padding: 8px 6px;
}
footer h3 {
    font-size: 20px;
    color: #FFEB3B;
}
.follow-us a {
    padding: 8px 6px;
    display: inline-block;
}