Open in app

Sign in

Write

Sign in

How to Add a Responsive Footer to your Website

Solodev
8 min readAug 16, 2016

On every website you will find what is known as a footer, an essential extension of your website’s navigation. Your footer is a reminder of your brand, product, and the various elements of content on your website. It also serves as a great way to enable site search, social share, and contact forms. Having a mobile responsive footer is essential in the mobile age and this article will walk you through adding a responsive footer to your website.

Below is the HTML and CSS required to add a responsive footer to your website.

Step 1

Copy and paste the following HTML just below the end of your page content

<footer class="ct-footer">
   <div class="container">
      <form name="contentForm" enctype="multipart/form-data" method="post" action="">
         <div class="ct-footer-pre text-center-lg">
            <div class="inner">
               <span>Join WebCorpCo to receive updates, news & events!</span>
            </div>
            <div class="inner">
               <div class="form-group">
                  <input name="formfields[nl_email]" id="nl_email" class="validate[required]" placeholder="Enter your email address" type="text" value=""> <label for="nl_email" class="sr-only">Email Address</label> <button type="submit" class="btn btn-motive">Join</button>
               </div>
            </div>
         </div>
      </form>
      <ul class="ct-footer-list text-center-sm">
         <li>
            <h2 class="ct-footer-list-header">
               Learn More
            </h2>
            <ul>
               <li>
                  <a href="">Company</a>
               </li>
               <li>
                  <a href="">Clients</a>
               </li>
               <li>
                  <a href="">News</a>
               </li>
               <li>
                  <a href="">Careers</a>
               </li>
            </ul>
         </li>
         <li>
            <h2 class="ct-footer-list-header">
               Services
            </h2>
            <ul>
               <li>
                  <a href="">Design</a>
               </li>
               <li>
                  <a href="">Marketing</a>
               </li>
               <li>
                  <a href="">Sales</a>
               </li>
               <li>
                  <a href="">Programming</a>
               </li>
               <li>
                  <a href="">Support</a>
               </li>
            </ul>
         </li>
         <li>
            <h2 class="ct-footer-list-header">
               The Industry
            </h2>
            <ul>
               <li>
                  <a href="">Thought Leadership</a>
               </li>
               <li>
                  <a href="">Webinars</a>
               </li>
               <li>
                  <a href="">Events</a>
               </li>
               <li>
                  <a href="">Sponsorships</a>
               </li>
               <li>
                  <a href="">Advisors</a>
               </li>
               <li>
                  <a href="">Training Program</a>
               </li>
               <li>
                  <a href="">Activities & Campaigns</a>
               </li>
            </ul>
         </li>
         <li>
            <h2 class="ct-footer-list-header">
               Public Relations
            </h2>
            <ul>
               <li>
                  <a href="">WebCorpCo Blog</a>
               </li>
               <li>
                  <a href="">Hackathons</a>
               </li>
               <li>
                  <a href="">Videos</a>
               </li>
               <li>
                  <a href="">News Releases</a>
               </li>
               <li>
                  <a href="">Newsletters</a>
               </li>
            </ul>
         </li>
         <li>
            <h2 class="ct-footer-list-header">
               About
            </h2>
            <ul>
               <li>
                  <a href="">FAQ</a>
               </li>
               <li>
                  <a href="">Our Board</a>
               </li>
               <li>
                  <a href="">Our Staff</a>
               </li>
               <li>
                  <a href="">Contact Us</a>
               </li>
            </ul>
         </li>
      </ul>
      <div class="ct-footer-meta text-center-sm">
         <div class="row">
            <div class="col-sm-6 col-md-2">
               <img alt="logo" src="https://www.solodev.com/assets/footer/logo.png">
            </div>
            <div class="col-sm-6 col-md-3">
               <address>
                  <span>WebCorpCo<br></span>123 Easy Street<br>
                  Orlando, Florida, 32801<br>
                  <span>Phone: <a href="tel:5555555555">(555) 555-8899</a></span>
               </address>
            </div>
            <div class="col-sm-6 col-md-2 ct-u-paddingTop10">
               <a href="" target="_blank"><img alt="app store" src="https://www.solodev.com/assets/footer/appstore.png"></a>
            </div>
            <div class="col-sm-6 col-md-2 ct-u-paddingTop10">
               <a href="" target="_blank"><img alt="google play store" src="https://www.solodev.com/assets/footer/androidstore.png"></a>
            </div>
            <div class="col-sm-6 col-md-3">
               <ul class="ct-socials list-unstyled list-inline">
                  <li>
                     <a href="" target="_blank"><img alt="facebook" src="https://www.solodev.com/assets/footer/facebook-white.png"></a>
                  </li>
                  <li>
                     <a href="" target="_blank"><img alt="twitter" src="https://www.solodev.com/assets/footer/twitter-white.png"></a>
                  </li>
                  <li>
                     <a href="" target="_blank"><img alt="youtube" src="https://www.solodev.com/assets/footer/youtube-white.png"></a>
                  </li>
                  <li>
                     <a href="" target="_blank"><img alt="instagram" src="https://www.solodev.com/assets/footer/instagram-white.png"></a>
                  </li>
                  <li>
                     <a href="" target="_blank"><img alt="pinterest" src="https://www.solodev.com/assets/footer/pinterest-white.png"></a>
                  </li>
               </ul>
            </div>
         </div>
      </div>
   </div>
   <div class="ct-footer-post">
      <div class="container">
         <div class="inner-left">
            <ul>
               <li>
                  <a href="">FAQ</a>
               </li>
               <li>
                  <a href="">News</a>
               </li>
               <li>
                  <a href="">Contact Us</a>
               </li>
            </ul>
         </div>
         <div class="inner-right">
            <p>
               Copyright &copy; 2016 WebCorpCo.&nbsp;<a href="">Privacy Policy</a>
            </p>
            <p>
               <a class="ct-u-motive-color" href="" target="_blank">Web Design</a> by DigitalUs on <a href="" target="_blank">Solodev CMS</a>
            </p>
         </div>
      </div>
   </div>
</footer>

Step 2

Add the CSS below to the main stylesheet of your website

html,
body,
img,
figure {
    max-width: 100%
}html,
body {
    overflow-x: hidden;
    color: #000;
    -ms-overflow-style: scrollbar;
    -webkit-font-smoothing: antialiased
}a,
a:hover,
a:focus,
a:active {
    text-decoration: none;
    color: inherit
}a {
    -webkit-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out
}.ct-u-paddingTop10 {
    padding-top: 10px !important
}.ct-footer {
    background-color: #111;
    padding-top: 70px;
    margin-top: 20px;
    position: relative;
}.ct-footer-pre {
    width: 100%;
    padding-bottom: 55px;
    border-bottom: 1px solid #555;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}@media (min-width:1200px) {
    .ct-footer-pre {
        display: table
    }
    .ct-footer-pre > .inner {
        display: table-cell;
        vertical-align: middle
    }
}@media (max-width:1199px) {
    .ct-footer-pre .form-group {
        padding-top: 15px
    }
}.ct-footer-pre span {
    font-family: 'Open Sans Condensed', sans-serif;
    color: #ebebeb;
    font-size: 30px
}.ct-footer-pre .form-group {
    position: relative;
    margin: 0;
}.ct-footer-pre .form-group:before,
.ct-footer-pre .form-group:after {
    content: '';
    display: table
}.ct-footer-pre .form-group:after {
    clear: both
}.ct-footer-pre .form-group input {
    border: 1px solid #00bff3;
    background-color: #333;
    color: #fff;
    height: 50px;
    padding: 0 30px;
    margin: 0 5px;
    border-radius: 0 !important;
}@media (min-width:480px) {
    .ct-footer-pre .form-group input {
        width: 331px
    }
}.ct-footer-pre .form-group button {
    height: 50px;
    position: relative;
    width: 80px;
    padding: 0
}@media (min-width:480px) {
    .ct-footer-pre .form-group button {
        top: -1px
    }
}@media (max-width:479px) {
    .ct-footer-pre .form-group input {
        float: left;
        width: 70%;
        margin: 0
    }
    .ct-footer-pre .form-group button {
        float: left;
        width: 30%
    }
}.ct-footer-list {
    padding: 50px 0;
    list-style: none;
    padding-left: 0;
    display: table;
    width: 100%;
    border-bottom: 1px solid #555;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}@media (max-width:479px) {
    .ct-footer-list {
        padding: 20px 0
    }
}@media (min-width:1200px) {
    .ct-footer-list > li {
        width: 20%;
        display: table-cell;
        vertical-align: top
    }
    .ct-footer-list > li:last-child {
        width: 7%
    }
}@media (min-width:768px) and (max-width:1199px) {
    .ct-footer-list > li {
        width: 33.3333%
    }
}@media (min-width:480px) and (max-width:767px) {
    .ct-footer-list > li {
        width: 50%
    }
}@media (max-width:479px) {
    .ct-footer-list > li {
        width: 100%;
        text-align: center
    }
}@media (max-width:1199px) {
    .ct-footer-list > li {
        display: inline-block;
        float: left
    }
}.ct-footer-list > li .ct-footer-list-header {
    font-family: 'Open Sans Condensed', sans-serif;
    color: #00bff3;
    font-size: 30px
}.ct-footer-list > li ul {
    list-style: none;
    padding-left: 0;
}.ct-footer-list > li ul li a {
    color: #fff;
}.ct-footer-list > li ul li a:hover {
    text-decoration: underline
}.ct-footer-post {
    background: #000;
    padding: 30px 0;
}.ct-footer-post .inner-left,
.ct-footer-post .inner-right {
    padding: 20px 0
}.ct-footer-post ul {
    list-style: none;
    padding-left: 0;
    margin: 0 -20px;
}.ct-footer-post ul li {
    display: inline-block;
    margin: 0 20px
}.ct-footer-post a {
    color: #fff;
}.ct-footer-post a:hover {
    text-decoration: underline
}.ct-footer-post p {
    color: #fff;
}@media (min-width:768px) {
    .ct-footer-post p {
        display: inline-block
    }
    .ct-footer-post p + p {
        padding-left: 50px
    }
}@media (min-width:992px) {
    .ct-footer-post .inner-left {
        float: left
    }
    .ct-footer-post .inner-right {
        float: right
    }
}@media (max-width:991px) {
    .ct-footer-post {
        text-align: center
    }
}.ct-footer-meta {
    padding-top: 30px;
}.ct-footer-meta .ct-socials {
    padding: 20px 0;
}.ct-footer-meta .ct-socials li {
    padding: 0 3px
}.ct-footer--with-button {
    padding-top: 150px
}address {
    color: #fff;
    display: inline-block;
}address span {
    font-weight: 600
}address a {
    color: #fff;
}address a:hover {
    text-decoration: underline
}@media (max-width:767px) {
    address {
        padding-top: 30px
    }
}.btn {
    font-family: 'Open Sans Condensed', sans-serif;
    border-radius: 0;
    border: none;
    text-transform: uppercase;
    color: #111;
    font-size: 26px;
    padding: 12px 30px;
}.btn.btn-motive {
    background-color: #00bff3;
    -webkit-transition: all .25s ease;
    transition: all .25s ease;
}.btn.btn-motive:hover {
    background-color: #00bff3;
}.btn.btn-motive:hover:active {
    background-color: #00bff3
}.btn.btn-violet {
    color: #fff;
    background-color: #4f4f99;
    -webkit-transition: all .25s ease;
    transition: all .25s ease;
}.btn.btn-violet:hover {
    background-color: #37376b;
}.btn.btn-violet:hover:active {
    background-color: #2f2f5b
}.btn.btn-green {
    color: #fff;
    background-color: #43670f;
    -webkit-transition: all .25s ease;
    transition: all .25s ease;
}.btn.btn-green:hover {
    background-color: #36520c;
}.btn.btn-green:hover:active {
    background-color: #314a0b
}.btn.btn-red {
    color: #fff;
    background-color: #da2229;
    -webkit-transition: all .25s ease;
    transition: all .25s ease;
}.btn.btn-red:hover {
    background-color: #ae1b21;
}.btn.btn-red:hover:active {
    background-color: #9d181e
}.btn.btn-white {
    background-color: #fff;
    -webkit-transition: all .25s ease;
    transition: all .25s ease;
}.btn.btn-white:hover {
    background-color: #d9d9d9;
}.btn.btn-white:hover:active {
    background-color: #c9c9c9
}.btn.btn-large {
    padding: 20px 50px;
    font-size: 30px;
    white-space: normal;
}@media (max-width:479px) {
    .btn.btn-large {
        padding: 20px 10px;
        line-height: .9;
        font-size: 26px;
        letter-spacing: -.2px
    }
}
.ct-mediaSection {
    background-attachment: fixed
}.ct-section_header--type1 {
    font-family: 'Open Sans Condensed', sans-serif;
    color: #000;
    font-size: 115px;
    text-transform: uppercase;
}@media (max-width:479px) {
    .ct-section_header--type1 {
        font-size: 60px;
        line-height: .8
    }
}.ct-section_header--type2 small {
    font-family: 'coquette', fantasy;
    font-size: 58px;
    line-height: .7;
    display: block;
    font-weight: 700;
    position: relative;
    left: -12px
}.ct-section_header--type2 span {
    font-family: 'Bebas Neue';
    font-size: 115px;
    line-height: .8
}.ct-section_header--type2 img {
    display: inline-block;
    float: left;
    position: relative;
    top: 15px;
    padding-right: 3px
}.ct-section_header--type3 {
    text-align: center;
}.ct-section_header--type3 small {
    font-family: 'coquette', fantasy;
    font-size: 50px;
    padding: 15px 0;
    font-weight: 700;
    color: #fff;
    background-image: url("/core/fileparse.php/16/urlt/../images/ribbon.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block
}.ct-section_header--type3 span {
    font-family: 'Bebas Neue';
    font-size: 150px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: .85
}@media (max-width:479px) {
    .ct-section_header--type3 small {
        font-size: 25px
    }
    .ct-section_header--type3 span {
        font-size: 90px
    }
}.ct-section_header--type4 {
    text-align: center;
}.ct-section_header--type4:before,
.ct-section_header--type4:after {
    content: '';
    display: table
}.ct-section_header--type4:after {
    clear: both
}.ct-section_header--type4 small {
    font-family: 'coquette', fantasy;
    font-size: 50px;
    color: inherit;
    font-weight: 700;
    display: block
}.ct-section_header--type4 span {
    font-family: 'nimbus-sans-condensed', sans-serif;
    font-weight: 400;
    font-weight: bold;
    font-size: 150px;
    text-transform: uppercase;
    display: block;
    line-height: .7
}@media (max-width:479px) {
    .ct-section_header--type4 small {
        font-size: 40px
    }
    .ct-section_header--type4 span {
        font-size: 80px
    }
}.ct-section_header + p {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -1.5px;
    text-align: center;
}@media (max-width:479px) {
    .ct-section_header + p {
        font-size: 22px
    }
}.ct-section_header--type4 + p {
    font-family: 'nimbus-sans-condensed', sans-serif;
    font-weight: 400;
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
}@media (max-width:479px) {
    .ct-section_header--type4 + p {
        font-size: 28px
    }
}

Step 3

Add the includes below to the web pages where your footer will live

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">

Demo on JSFiddle

Download from GitHub

Originally Posted here on the Solodev Web Design Blog

Brought to you by the Solodev Team. Solodev is a cloud-based web content management system that empowers users with the freedom to bring amazing web designs to life.

Web Design
Web Development
CSS
JavaScript
Responsive Design

--

--

Solodev

Written by Solodev

2.1K Followers

Solodev helps digital marketers and developers build better websites and digital experiences with free code tutorials at www.solodev.com/blog/

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams