"footer with grey background"
Bootstrap 4.1.1 Snippet by carlj315

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE html> <html lang="en"> <head> <title>Footer</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700" rel="stylesheet"> </head> <footer class="container-fluid bg-grey py-5"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="row"> <div class="col-md-6 "> <div class="logo-part"> <img src="https://i.ibb.co/sHZz13b/logo.png" class="w-50 logo-footer" > <p>7637 Laurel Dr. King Of Prussia, PA 19406</p> <p>Use this tool as test data for an automated system or find your next pen</p> </div> </div> <div class="col-md-6 px-4"> <h6> About Company</h6> <p>But horizontal lines can only be a full pixel high.</p> <a href="#" class="btn-footer"> More Info </a><br> <a href="#" class="btn-footer"> Contact Us</a> </div> </div> </div> <div class="col-md-6"> <div class="row"> <div class="col-md-6 px-4"> <h6> Help us</h6> <div class="row "> <div class="col-md-6"> <ul> <li> <a href="#"> Home</a> </li> <li> <a href="#"> About</a> </li> <li> <a href="#"> Service</a> </li> <li> <a href="#"> Team</a> </li> <li> <a href="#"> Help</a> </li> <li> <a href="#"> Contact</a> </li> </ul> </div> <div class="col-md-6 px-4"> <ul> <li> <a href="#"> Cab Faciliy</a> </li> <li> <a href="#"> Fax</a> </li> <li> <a href="#"> Terms</a> </li> <li> <a href="#"> Policy</a> </li> <li> <a href="#"> Refunds</a> </li> <li> <a href="#"> Paypal</a> </li> </ul> </div> </div> </div> <div class="col-md-6 "> <h6> Newsletter</h6> <div class="social"> <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a> </div> <form class="form-footer my-3"> <input type="text" placeholder="search here...." name="search"> <input type="button" value="Go" > </form> <p>That's technology limitation of LCD monitors</p> </div> </div> </div> </div> </div> </div>
body { font-family: 'Signika', sans-serif; } .bg-grey { background: #292929; } .logo-footer { margin-bottom: 40px; } footer { color: grey; } footer p, a { font-size: 12px; font-family: 'Roboto', sans-serif; } footer h6 { font-family: 'Playfair Display', serif; margin-bottom: 40px; position: relative; } footer h6:after { position: absolute; content: ""; background: grey; width: 12%; height: 1px; left: 0; bottom: -20px; } .btn-footer { color: grey; text-decoration: none; border: 1px solid; border-radius: 43px; font-size: 13px; padding: 7px 30px; line-height: 47px; } .btn-footer:hover { text-decoration: none; } .form-footer input[type="text"] { border: none; border-radius: 16px 0 0 16px; outline: none; padding-left: 10px; } ::placeholder { font-size: 10px; padding-left: 10px; font-style: italic; } .form-footer input[type="button"] { border: none; background:#232323; margin-left: -5px; color: #fff; outline: none; border-radius: 0 16px 16px 0; padding: 2px 12px; } .social .fa { color: grey; font-size: 22px; padding: 10px 15px; background: #3c3c3c; } footer ul li { list-style: none; display: block; } footer ul { padding-left: 0; } footer ul li a{ text-decoration: none; color: grey; text-decoration:none; } a:hover { text-decoration: none; color: #f5f5f5 !important; } .logo-part { border-right: 1px solid grey; height: 100%; }

Related: See More

BLK• Design System
Bootstrap 4 Footer Design
Footer using Bootstrap 4
Social Icon Strip Footer

Questions / Comments: