Creating a Bootstrap Footer: A Step-by-Step Guide With Source Code

In web design, a footer serves as a critical element for providing essential information and navigation options to users. Adding social icons to your footer further enhances user engagement and connectivity.

Here is step by step guide of creating a Bootstrap 4 footer with social icon.

Step 1:Creating a Structured Bootstrap 4 Footer With HTML

The given HTML code constructs a Bootstrap 4 footer with four distinct columns: “About Us,” “Services,” “Contact Us,” and “Follow Us.” Each column contains relevant content, such as company information, services offered, and contact details, organized into structured lists. Additionally, social media icons for Facebook and LinkedIn are included to encourage user engagement.

The footer is designed to be responsive, ensuring compatibility across various devices and concludes with copyright information for legal compliance. Overall, it offers a comprehensive and visually appealing footer solution for website design. Here is the code example:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Footer with Social Icons</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://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >
</head>
<body><footer class="mainfooter" role="contentinfo">
<div class="footer-middle">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<!-- Column 1 -->
<div class="footer-pad">
<h4>About Us</h4>
<ul class="list-unstyled">
<li><a href="#">Our Story</a></li>
<li><a href="#">Mission</a></li>
<li><a href="#">Values</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Partnerships</a></li>
<li><a href="#">FAQs</a></li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6">
<!-- Column 2 -->
<div class="footer-pad">
<h4>Services</h4>
<ul class="list-unstyled">
<li><a href="#">Web Design</a></li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Digital Marketing</a></li>
<li><a href="#">SEO</a></li>
<li><a href="#">Content Creation</a></li>
<li><a href="#">Consulting</a></li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6">
<!-- Column 3 -->
<div class="footer-pad">
<h4>Contact Us</h4>
<ul class="list-unstyled">
<li><a href="#">Address</a></li>
<li><a href="#">Phone</a></li>
<li><a href="#">Email</a></li>
<li><a href="#">Contact Form</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Feedback</a></li>
</ul>
</div>
</div>
<div class="col-md-3">
<!-- Social Icons -->
<h4>Follow Us</h4>
<ul class="social-network social-circle">
<li><a href="#" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" class="icoLinkedin" title="Linkedin"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
<div class="row">
<!-- Copyright -->
<div class="col-md-12 copy">
<p class="text-center">&copy; Copyright 2024 - Company Name. All rights reserved.</p>
</div>
</div>

</div>
</div>
</footer>
</body>
</html>

Step 2:Styling Bootstrap 4 Footer with Social Icons

This CSS code defines styles for a Bootstrap 4 footer, including background gradients, text colors, and hover effects for links. It also customizes social media icons, specifying their appearance and behavior when hovered over.

footer {
background: #16222A;
background: -webkit-linear-gradient(59deg, #3A6073, #16222A);
background: #8429917d;
color: white;
margin-top:100px;
}

footer a {
color: #fff;
font-size: 14px;
transition-duration: 0.2s;
}

footer a:hover {
color: #FA944B;
text-decoration: none;
}

.copy {
font-size: 12px;
padding: 10px;
border-top: 1px solid #FFFFFF;
}

.footer-middle {
padding-top: 2em;
color: white;
}


/*SOCİAL İCONS*/

/* footer social icons */

ul.social-network {
list-style: none;
display: inline;
margin-left: 0 !important;
padding: 0;
}

ul.social-network li {
display: inline;
margin: 0 5px;
}


/* footer social icons */

.social-network a.icoFacebook:hover {
background-color: #3B5998;
}

.social-network a.icoLinkedin:hover {
background-color: #007bb7;
}

.social-network a.icoFacebook:hover i,
.social-network a.icoLinkedin:hover i {
color: #fff;
}

.social-network a.socialIcon:hover,
.socialHoverClass {
color: #44BCDD;
}

.social-circle li a {
display: inline-block;
position: relative;
margin: 0 auto 0 auto;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
text-align: center;
width: 30px;
height: 30px;
font-size: 15px;
}

.social-circle li i {
margin: 0;
line-height: 30px;
text-align: center;
}

.social-circle li a:hover i,
.triggeredHover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms--transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
transition: all 0.2s;
}

.social-circle i {
color: #595959;
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-o-transition: all 0.8s;
-ms-transition: all 0.8s;
transition: all 0.8s;
}

.social-network a {
background-color: #F9F9F9;
}

Creating a Bootstrap Footer: A Step-by-Step Guide With Source Code Demo

These simple steps create a Bootstrap 4 footer with social icons for your website. This footer not only enhances the visual appeal of your site but also provides users with valuable information and easy access to your social media presence.