You are currently viewing Create Responsive Footer Using HTML and CSS

Create Responsive Footer Using HTML and CSS

Create Responsive Footer Using HTML & CSS

Create Responsive Footer Using HTML & CSS
Create Responsive Footer Using HTML & 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.

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

HTML and Bootstrap 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>

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

 
 Responsive Footer Using HTML & CSS
Responsive Footer Using HTML Code Preview

 

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;
}

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

Responsive Footer Using HTML & CSS

Responsive Footer Using HTML & CSS
Responsive Footer Using HTML & CSS

 

Responsive Footer Using HTML & CSS
Responsive Footer Using HTML & CSS

 

50+ Html ,Css & Javascript Projects With Source Code

 

Responsive Footer Using HTML & CSS
Responsive Footer Using HTML & CSS

 

Live Preview Of Responsive Footer Using HTML and CSS

Now we have completed our CSS section,  Here is our updated output with CSS. Hope you like the Footer Responsive, you can see output project screenshots. See our other blogs and gain knowledge in front-end development.

Create Simple Portfolio Website Using Html Css (Portfolio Website Source Code)

Thank you

This post teaches us how to create a Footer Responsive using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki
code by – Baahubali

This Post Has 0 Comments

  1. Anonymous

    good explanation chhote

Leave a Reply