Bootstrap 4 Footer Example Code

Bootstrap 4 Footer Example with source code. This Bootstrap 4 footer example is created by Bootstrap, font-awesome, and custom CSS. If you want to add this to your project then you just need to copy and paste and change color schemes and content as you need.

HTML

<!-- Footer Section -->
<footer class="bg-dark">
    <div class="container">
      <div class="row">
            <div class="col-md-3 col-sm-6">
              <h3>About Us</h3>
              <p>We provide you the best solutions and creative ideas with HTML, CSS, Bootstrap, Javascript, Jquery technologies, and SEO.</p>
            </div>
            <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>Download App</h3>
                <div class="follow-us">
                    <ul>
                        <li><a href="#"><i class="fab fa-facebook-f"></i> Facebook</a></li>
                        <li><a href="#"><i class="fab fa-twitter"></i> Twitter</a></li>
                        <li><a href="#"><i class="fab fa-instagram"></i> Instagram</a></li>
                        <li><a href="#"><i class="fab fa-linkedin-in"></i> Linkedin</a></li>
                    </ul>
                </div>
            </div>                
      </div>
    </div>

    <!-- Copyright Text -->
    <div class="copyright-txt">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <p class="text-center">markuptag Copyright 2020. All Rights Reserved</p>
                </div>
            </div>
        </div>
    </div>
</footer>

CSS

footer {
    padding-top: 50px;
    color: #fff;
}
footer ul {
    padding: 0px;
}
footer ul li {
    list-style: none;
}
footer ul li a {
    padding: 5px 0px;
    color: #efefef;
    display: block;
    border-bottom: 1px solid #ddd;
}
footer ul li a:hover{
    color: #c3e0ff;
    text-decoration: none;
}
footer h3 {
    margin-bottom: 20px;
    font-size: 20px;
}
footer p {
    color: #efefef;
    padding: 10px 0px;
    margin: 0px;
}
footer i {
    color: #343a40;
    font-size: 13px;
    margin: 3px 5px;
    background-color: #fff;
    padding: 6px 0px;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    text-align: center;
}
.copyright-txt {
    background-color: rgba(0, 0, 0, 0.2);
    margin-top: 40px;
}