Bootstrap eCommerce Footer Template in HTML CSS
Bootstrap eCommerce Footer Template in HTML CSS
In this article, you will be learning how to make a simple eCommerce footer page design/template using HTML CSS and Bootstrap.
View:
Step 1: HTML code - paste in your required file (Eg: index.html)
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ecommerce Cart/Wishlist Page Design</title>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<div class="footer-area">
<div class="container">
<div class="row">
<div class="col-md-3">
<h4 class="footer-heading">Funda E-Commerce</h4>
<div class="footer-underline"></div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</div>
<div class="col-md-3">
<h4 class="footer-heading">Quick Links</h4>
<div class="footer-underline"></div>
<div class="mb-2"><a href="" class="text-white">Home</a></div>
<div class="mb-2"><a href="" class="text-white">About Us</a></div>
<div class="mb-2"><a href="" class="text-white">Contact Us</a></div>
<div class="mb-2"><a href="" class="text-white">Blogs</a></div>
<div class="mb-2"><a href="" class="text-white">Sitemaps</a></div>
</div>
<div class="col-md-3">
<h4 class="footer-heading">Shop Now</h4>
<div class="footer-underline"></div>
<div class="mb-2"><a href="" class="text-white">Collections</a></div>
<div class="mb-2"><a href="" class="text-white">Trending Products</a></div>
<div class="mb-2"><a href="" class="text-white">New Arrivals Products</a></div>
<div class="mb-2"><a href="" class="text-white">Featured Products</a></div>
<div class="mb-2"><a href="" class="text-white">Cart</a></div>
</div>
<div class="col-md-3">
<h4 class="footer-heading">Reach Us</h4>
<div class="footer-underline"></div>
<div class="mb-2">
<p>
<i class="fa fa-map-marker"></i> #444, some main road, some area, some street, bangalore, india - 560077
</p>
</div>
<div class="mb-2">
<a href="" class="text-white">
<i class="fa fa-phone"></i> +91 888-XXX-XXXX
</a>
</div>
<div class="mb-2">
<a href="" class="text-white">
<i class="fa fa-envelope"></i> fundaofwebit@gmail.com
</a>
</div>
</div>
</div>
</div>
</div>
<div class="copyright-area">
<div class="container">
<div class="row">
<div class="col-md-8">
<p class=""> © 2022 - Funda of Web IT - Ecommerce. All rights reserved.</p>
</div>
<div class="col-md-4">
<div class="social-media">
Get Connected:
<a href=""><i class="fa fa-facebook"></i></a>
<a href=""><i class="fa fa-twitter"></i></a>
<a href=""><i class="fa fa-instagram"></i></a>
<a href=""><i class="fa fa-youtube"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Step 2: CSS Code - paste in your linked style.css file.
.footer-area{
padding: 40px 0px;
background-color: #2874f0;
color: #fff;
}
.footer-area a{
text-decoration: none;
}
.footer-area .footer-heading{
font-size: 24px;
color: #fff;
}
.footer-area .footer-underline{
height: 1px;
width: 70px;
background-color: #ddd;
margin: 10px 0px;
}
.copyright-area{
padding: 14px 0px;
background-color: #262626;
}
.copyright-area p{
margin-bottom: 0px;
color: #fff;
}
.copyright-area .social-media{
text-align: end;
}
.copyright-area .social-media a{
margin: 0px 10px;
color: #fff;
width: 20px;
}
Thanks for reading.