Platform
- CMS
- AI
- Cloud
- Metaverse
- Mobile
- Blockchain
- Digital
- IoT
Pricing
Developers
Enterprise
About Us
Contact

Adding a Responsive Footer to your Website

In this increasingly mobile age, a responsive footer is absolutely essential...

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 website's 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 © 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);
}
.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;
}
.ct-footer-pre .form-group button {
  height: 50px;
  position: relative;
  width: 80px;
  padding: 0
}
.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);
}
.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,
.ct-footer-post 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 p {
  color: #fff;
}
.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;
}
.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,
.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;
}
.ct-mediaSection {
  background-attachment: fixed;
}
.ct-section_header--type1 {
  font-family: 'Open Sans Condensed', sans-serif;
  color: #000;
  font-size: 115px;
  text-transform: uppercase;
}
.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
}
.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
}
.ct-section_header + p {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -1.5px;
  text-align: center;
}
.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 Queries */

@media (min-width:1200px) {
  .ct-footer-pre {
    display: table;
  }
  .ct-footer-pre > .inner {
    display: table-cell;
    vertical-align: middle;
  }
  .ct-footer-list > li {
    width: 20%;
    display: table-cell;
    vertical-align: top;
  }
  .ct-footer-list > li:last-child {
    width: 7%;
  }
}

@media (max-width:1199px) {
  .ct-footer-pre .form-group {
      padding-top: 15px
  }
}
@media (max-width: 1199px) {
  .ct-footer-list > li {
    display: inline-block;
    float: left;
  }
}
@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;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .ct-footer-list > li {
    width: 33.3333%;
  }
}
@media (min-width:768px) {
  .ct-footer-post p {
    display: inline-block;
  }
  .ct-footer-post p + p {
    padding-left: 50px;
  }
}
@media (max-width:767px) {
  address {
    padding-top: 30px;
  }
}
@media (min-width: 480px) and (max-width:767px) {
  .ct-footer-list > li {
    width: 50%;
  }
}
@media (min-width:480px) {
  .ct-footer-pre .form-group button {
    top: -1px;
  }
  .ct-footer-pre .form-group input {
    width: 331px;
  }
}
@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 > li {
    width: 100%;
    text-align: center;
  }
  .ct-footer-list {
    padding: 20px 0;
  }
  .btn.btn-large {
    padding: 20px 10px;
    line-height: .9;
    font-size: 26px;
    letter-spacing: -.2px;
  }
  .ct-section_header--type1 {
    font-size: 60px;
    line-height: .8;
  }
  .ct-section_header + p {
    font-size: 22px;
  }
  .ct-section_header--type3 small {
    font-size: 25px;
  }
  .ct-section_header--type4 small {
      font-size: 40px;
  }
  .ct-section_header--type3 span {
    font-size: 90px;
  }
  .ct-section_header--type4 span {
      font-size: 80px;
  }
  .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>

Download from Github

Share on Facebook Tweet It

Scott Madara
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev