<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" integrity="sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=" crossorigin="anonymous" /> <footer class="footer_area"> <div class="container"> <div class="row"> <div class="col-md-3 col-sm-6"> <div class="single_ftr"> <h4 class="sf_title">Contacts</h4> <ul> <li>4080 Repperts Coaol Road Sackson, MS 00201 USA</li> <li>(+123) 685 78 455 <br> (+064) 336 987 245</li> <li>Contact@yourcompany.com</li> </ul> </div> </div> <!-- End Col --> <div class="col-md-3 col-sm-6"> <div class="single_ftr"> <h4 class="sf_title">Information</h4> <ul> <li><a href="#">About Us</a></li> <li><a href="#">Delivery Information</a></li> <li><a href="#">Privacy Policy</a></li> <li><a href="#">Terms & Conditions</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> </div> <!-- End Col --> <div class="col-md-3 col-sm-6"> <div class="single_ftr"> <h4 class="sf_title">Services</h4> <ul> <li><a href="#">Returns</a></li> <li><a href="#">Site Map</a></li> <li><a href="#">Wish List</a></li> <li><a href="#">My Account</a></li> <li><a href="#">Order History</a></li> </ul> </div> </div> <!-- End Col --> <div class="col-md-3 col-sm-6"> <div class="single_ftr"> <h4 class="sf_title">Newsletter</h4> <div class="newsletter_form"> <p>There are many variations of passages of Lorem Ipsum available, but the majority have </p> <form method="post" class="form-inline"> <input name="EMAIL" id="email" placeholder="Enter Your Email" class="form-control" type="email"> <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button> </form> </div> </div> </div> <!-- End Col --> </div> </div> <div class="ftr_btm_area"> <div class="container"> <div class="row"> <div class="col-sm-4"> <div class="ftr_social_icon"> <ul> <li><a href="#"><i class="fa fa-facebook"></i></a></li> <li><a href="#"><i class="fa fa-google"></i></a></li> <li><a href="#"><i class="fa fa-linkedin"></i></a></li> <li><a href="#"><i class="fa fa-twitter"></i></a></li> <li><a href="#"><i class="fa fa-rss"></i></a></li> </ul> </div> </div> <div class="col-sm-4"> <p class="copyright_text text-center">© 2019 All Rights Reserved Bootstrap 4 footer</p> </div> <div class="col-sm-4"> <div class="payment_mthd_icon text-right"> <ul> <li><i class="fa fa-cc-paypal"></i></li> <li><i class="fa fa-cc-visa"></i></li> <li><i class="fa fa-cc-discover"></i></li> <li><i class="fa fa-cc-mastercard"></i></li> <li><i class="fa fa-cc-amex"></i></li> </ul> </div> </div> </div> </div> </div> </footer>

ul { list-style: none; padding-left: 0px; margin-bottom: 0; } .footer_area { padding:60px 0 20px; position: relative; color: #fff; z-index: 100; background: #222; word-break: break-all; word-wrap: break-word; } .single_ftr form{ margin-top: 8px; } .single_ftr p{ margin-bottom: 10px; } .sf_title{ color: #33d286; text-transform: uppercase; font-size: 17px; margin-top: 0px; margin-bottom: 15px; } .ftr_logo { float: left; padding: 15px 46px 0 0; } .ftr_logo a img { transition: all 0.4s ease-in-out 0s; -webkit-transition: all 0.4s ease-in-out 0s; -moz-transition: all 0.4s ease-in-out 0s; -o-transition: all 0.4s ease-in-out 0s; } .ftr_logo a:hover img { -webkit-filter: grayscale(100%); filter: grayscale(100%); opacity: 0.3; } .newsletter_form form{ position: relative; display: block; } .newsletter_form { margin-top: 0px; overflow: hidden; } .single_ftr p{ display: inline-block; } .newsletter_form .form-control { height: 50px; line-height: 50px; margin: 0; padding: 8px 20px; width: 100%; position: relative; background: transparent; color: #fff; border-radius: 0; } .newsletter_form button { border: inherit; border-radius: 0; background: transparent; color: #fff; text-transform: uppercase; box-shadow: none; border: 1px solid transparent; transition: 0.5s; letter-spacing: 0.5px; position: absolute; right: 0px; top: 0; padding: 12px 17px; transition: .5s; } .newsletter_form button:hover, .newsletter_form button:hover{ background: transparent; color: #33d286; opacity: .9; } .newsletter_form ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #fff; opacity: 1 } .newsletter_form ::-moz-placeholder { /* Firefox 19+ */ color: #fff; opacity: 1 } .newsletter_form :-ms-input-placeholder { /* IE 10+ */ color: #fff; opacity: 1 } .newsletter_form :-moz-placeholder { /* Firefox 18- */ color: #fff; opacity: 1 } .form-control{ } .form-control:focus{ border-color: #33d286; } .single_ftr li { padding-bottom: 7px; color: #fff; } .single_ftr a { color: #fff; } .single_ftr a:hover { color: #33d286; } .ftr_social_icon li { display: inline-block; text-align: center; padding: 4px; } .ftr_social_icon ul li a { border: 1px solid #fff; border-radius: 50%; color: #fff; display: inline-block; font-size: 17px; height: 40px; line-height: 32px; padding: 4px 8px; width: 40px; transition: .5s; } .ftr_social_icon ul li a:hover{ background: #33d286; border-color: #33d286; color: #fff; } .ftr_btm_area { background: transparent; padding-top: 20px; padding-bottom: 20px; border-top: 1px dotted #888; margin-top: 28px; z-index: 100; position: relative; } .copyright_text{ margin: 6px 0; } .payment_mthd_icon li { display: inline-block; margin-left: 10px; font-size: 30px; color: #fff; }