Footer Design Using Bootstrap4

Footer Design Using Bootstrap4 

Step-1: Use Html 

<footer class="footer-section">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-3">
                    <!-- footer left company address markup start -->
                    <div class="footer-left">
                        <div class="company-logo">
                            <img src="images/logo.png" alt="">
                        </div>
                        <div class="company-address">
                            <div class="title-name">Address:</div>
                            <div class="title-contain">
                                <span>Nazrul Mansion (1st Floor) 38, <br> Commercial plot, Block-Kha Mirpur-10, <br> Dhaka-1216</span>
                            </div>
                            <div class="title-name">Phone:</div>
                            <div class="title-contain">
                                <span>(+880) 1725-2292</span>
                            </div>
                            <div class="title-name">Email:</div>
                            <div class="title-contain">
                                <span>nahidhassan9258@gmail.com</span>
                            </div>
                        </div>
                        <div class="company-contact">
                            <a href="#" class="social-link"> <i class="fa fa-facebook"></i> </a>
                            <a href="#" class="social-link"> <i class="fa fa-youtube"></i> </a>
                            <a href="#" class="social-link"> <i class="fa fa-instagram"></i> </a>
                            <a href="#" class="social-link"> <i class="fa fa-linkedin"></i> </a>
                            <a href="#" class="social-link"> <i class="fa fa-twitter"></i> </a>
                        </div>
                    </div>
                    <!-- footer left company address markup end -->
                </div>
                <div class="col-lg-3">
                    <!-- footer mid customer service markup start -->
                    <div class="footer-mid">
                        <div class="title-head">Customer service</div>
                        <ul class="nav list flex-column">
                            <li class="nav-item">
                                <a class="nav-link" href="#">About secret fiesta</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Terms & Condition</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Privacy Policy</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Careers</a>
                            </li>
                        </ul>
                    </div>
                    <!-- footer mid customer service markup end -->
                </div>
                <div class="col-lg-3">
                    <!-- footer right account markup start -->
                    <div class="footer-right">
                        <div class="title-head">My account</div>
                        <ul class="nav list flex-column">
                            <li class="nav-item">
                                <a class="nav-link" href="#">My account</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Orders</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Addresses</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Track Your Order</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Featured Recommendation</a>
                            </li>
                        </ul>
                    </div>
                    <!-- footer right account markup end -->
                </div>
                <div class="col-lg-3">
                    <div class="payment-methods">
                       <div class="title-head">payment methods</div>
                        <ul class="nav list">
                            <li class="nav-item">
                               <a class="nav-link" href="#">
                                   <img src="images/bkash_icon.png" alt="bkash_icon">
                               </a>
                            </li>
                            <li class="nav-item">
                               <a class="nav-link" href="#">
                                   <img src="images/visa-icon.png" alt="visa-icon.png">
                               </a>
                            </li>
                            <li class="nav-item">
                               <a class="nav-link" href="#">
                                   <img src="images/mastercard-icon.png" alt="mastercard-icon">
                               </a>
                            </li>
                            <li class="nav-item">
                               <a class="nav-link" href="#">
                                   <img src="images/upay.png" alt="upay">
                               </a>
                            </li>
                            <li class="nav-item">
                               <a class="nav-link" href="#">
                                   <img src="images/qcash.png" alt="qcash">
                               </a>
                            </li>
                        </ul> 
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <div class="copyright">
                        <p>© Nahid Hassan <span>(2020)</span></p>
                    </div>
                </div>
            </div>
        </div>
    </footer>

Step-2: Use css

.footer-section {
    background: #FFF;
    margin-top: 20px;
    padding-top: 20px;
}

.footer-section .footer-left .company-logo {
    padding-bottom: 10px;
}

.footer-section .footer-left .company-address .title-name {
    float: left;
    font-size: 16px;
    font-weight: 600;
    padding-right: 10px;
    color: #333;
    text-transform: capitalize;
}

.footer-section .footer-left .company-address .title-contain {
    color: #333;
    font-size: 16px;
    font-weight: 400;
    text-transform: capitalize;
    display: flex;
}

.company-contact {
    padding: 10px 0;
}

.company-contact .social-link {
    margin: 0 2px;
}

.company-contact .social-link .fa {
    color: #fff;
    width: 30px;
    height: 30px;
    line-height: 30px;
    background: #03233a;
    text-align: center;
    font-size: 18px;
}

.company-contact .social-link .fa:hover {
    color: #fd6e4f;
    transition: all .3s linear;
}

.footer-mid .title-head {
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    color: #444;
    padding-bottom: 10px;
}

.footer-mid .list .nav-item .nav-link {
    font-size: 16px;
    font-weight: 400;
    color: #333;
    text-transform: capitalize;
    padding: 0px;
    display: inline-block;
}

.footer-mid .list .nav-item .nav-link:hover {
    color: #fd6e4f;
    transition: all .3s linear;
}

.footer-right .title-head {
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    color: #444;
    padding-bottom: 10px;
}

.footer-right .list .nav-item .nav-link {
    font-size: 16px;
    font-weight: 400;
    color: #333;
    text-transform: capitalize;
    padding: 0px;
    display: inline-block;
}

.footer-right .list .nav-item .nav-link:hover {
    color: #fd6e4f;
    transition: all .3s linear;
}

.payment-methods .title-head{
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    color: #444;
    padding-bottom: 10px;
}

.payment-methods .list .nav-item .nav-link {
    padding: 0px;
    margin-right: 5px;
    margin-top: 5px;
}
.payment-methods .list .nav-item .nav-link img {
    width: 50px;
}
.footer-section .copyright {
    background: #03233A;
    text-align: center;
}
.footer-section .copyright p {
    margin: 0px;
    font-weight: 400;
    font-size: 14px;
    color: #fff;
    text-transform: capitalize;
    padding: 5px 0;
}
.footer-section .copyright p span{
    color: #fd6e4f;
}