Create Responsive Footer Using HTML and CSS

Welcome to the Codewithrandom blog. In this blog, we learn how to create a Responsive Footer. We use Html for creating Footer text and links and Css for styling the Footer, And Some Bootstrap elements for the Responsive Footer.

 

Footer is basically the bottom page of a webpage or website, which has an all the social media handle links to content which are important such as learning, resources, general which contains the license so that user can be tension free and trust the website about the copyrights, etc.

50+ HTML, CSS & JavaScript Projects With Source Code

Code by	Baahubali
Project Download	Link Available Below
Language used	HTML and CSS
External link / Dependencies	Yes
Responsive	Yes

I hope you enjoy our blog so let’s start with a basic Html and Bootstrap Structure for the Responsive Footer.

HTML Code For Responsive Footer

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<footer class="section bg-footer">
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="">
<h6 class="footer-heading text-uppercase text-white">Information</h6>
<ul class="list-unstyled footer-link mt-4">
<li><a href="">Pages</a></li>
<li><a href="">Our Team</a></li>
<li><a href="">Feuchers</a></li>
<li><a href="">Pricing</a></li>
</ul>
</div>
</div>
<div class="col-lg-3">
<div class="">
<h6 class="footer-heading text-uppercase text-white">Ressources</h6>
<ul class="list-unstyled footer-link mt-4">
<li><a href="">Monitoring Grader </a></li>
<li><a href="">Video Tutorial</a></li>
<li><a href="">Term &amp; Service</a></li>
<li><a href="">Zeeko API</a></li>
</ul>
</div>
</div>
<div class="col-lg-2">
<div class="">
<h6 class="footer-heading text-uppercase text-white">Help</h6>
<ul class="list-unstyled footer-link mt-4">
<li><a href="">Sign Up </a></li>
<li><a href="">Login</a></li>
<li><a href="">Terms of Services</a></li>
<li><a href="">Privacy Policy</a></li>
</ul>
</div>
</div>
<div class="col-lg-4">
<div class="">
<h6 class="footer-heading text-uppercase text-white">Contact Us</h6>
<p class="contact-info mt-4">Contact us if need help withanything</p>
<p class="contact-info">+01 123-456-7890</p>
<div class="mt-5">
<ul class="list-inline">
<li class="list-inline-item"><a href="#"><i class="fab facebook footer-social-icon fa-facebook-f"></i></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab twitter footer-social-icon fa-twitter"></i></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab google footer-social-icon fa-google"></i></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab apple footer-social-icon fa-apple"></i></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="text-center mt-5">
<p class="footer-alt mb-0 f-14">2019 © Anup, All Rights Reserved</p>
</div>
</footer>

Simple Portfolio Website Using Html And Css With Source Code

Before that, we must add a few crucial links inside the head area in order to add the structure of our footer. These URLs need to be added inside our head section because we are using Bootstrap to create a responsive footer.

Now to add the structure of our footer, using the <footer> tag, we will create a block for our footer section, and now inside that section, with the help of <div>,<unorder list>, and <p> tags we will create the footer structure and add the necessary details that a footer generally requires.

There is all HTML& Bootstrap Code for the Responsive Footer. Now, you can see output without CSS, then we write CSS Code for the Responsive Footer.

Only Html Code Output Of Footer

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

CSS Code For Responsive Footer

.bg-footer {
background-color: #33383c;
padding: 50px 0 30px;
}
.footer-heading {
letter-spacing: 2px;
}
.footer-link a {
color: #acacac;
line-height: 40px;
font-size: 14px;
transition: all 0.5s;
}
.footer-link a:hover {
color: #1bbc9b;
}
.contact-info {
color: #acacac;
font-size: 14px;
}
.footer-social-icon {
font-size: 15px;
height: 34px;
width: 34px;
line-height: 34px;
border-radius: 3px;
text-align: center;
display: inline-block;
}
.facebook {
background-color: #4e71a8;
color: #ffffff;
}
.twitter {
background-color: #55acee;
color: #ffffff;
}
.google {
background-color: #d6492f;
color: #ffffff;
}
.apple {
background-color: #424041;
color: #ffffff;
}
.footer-alt {
color: #acacac;
}
.footer-heading {
position: relative;
padding-bottom: 12px;
}
.footer-heading:after {
content: '';
width: 25px;
border-bottom: 1px solid #FFF;
position: absolute;
left: 0;
bottom: 0;
display: block;
border-bottom: 1px solid #1bbc9b;
}

Step1:We will style the footer backdrop by using the class selector (.bg-footer). We’ll set the backdrop to be “charcoal grey” using the background-color property, and we’ll add 20 px of padding to the footer using the padding property. The header in the footer will be styled similarly, and the footer will receive 20 px of additional letter spacing.

Gym Website Using HTML and CSS With Source Code

.bg-footer {
    background-color: #33383c;
    padding: 50px 0 30px;
}

.footer-heading {
    letter-spacing: 2px;
}

Step2:Now we’ll style the links in the footer. We’ll use the colour property to change the font’s colour to “grey,” the line height to “40 px,” and the transition property to give the bottom links some motion.

We’ll also style the social media icons, add a hover property, add a heading to the footer, and alter the font colour on hover.

Responsive Resume/CV Website Using HTML & CSS

 footer-link a {   color: #acacac;
    line-height: 40px;
    font-size: 14px;
    transition: all 0.5s;
}

.footer-link a:hover {
    color: #1bbc9b;
}

.contact-info {
    color: #acacac;
    font-size: 14px;
}

.footer-social-icon {
    font-size: 15px;
    height: 34px;
    width: 34px;
    line-height: 34px;
    border-radius: 3px;
    text-align: center;
    display: inline-block;
}

.facebook {
    background-color: #4e71a8;
    color: #ffffff;
}

.twitter {
    background-color: #55acee;
    color: #ffffff;
}

.google {
    background-color: #d6492f;
    color: #ffffff;
}

.apple {
    background-color: #424041;
    color: #ffffff;
}

.footer-alt {
    color: #acacac;
}

.footer-heading {
    position: relative;
    padding-bottom: 12px;
}

.footer-heading:after {
    content: '';
    width: 25px;
    border-bottom: 1px solid #FFF;
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    border-bottom: 1px solid #1bbc9b;
}

Now we have completed our CSS section For the Footer. Here is our final updated output With HTML & CSS.

Responsive Footer Code in Html and Css

50+ Html ,Css & Javascript Projects With Source Code

Live Preview Of Responsive Footer Using HTML and CSS