Bootstrap 5 Footer | Create Responsive Footer Using HTML & Bootstrap 5

In this Bootstrap 5 tutorial, I will teach you how to create an awesome responsive footer using only HTML & Bootstrap 5.

Bootstrap 5 Footer | Create Responsive Footer Using HTML & Bootstrap 5 | Awesome Footer Design

In this Bootstrap 5 tutorial, I will teach you how to create an awesome responsive footer using only HTML & Bootstrap 5. This tutorial is very helpful for frontend developers because Bootstrap 5 has recently been released, and building UI components like a footer is a great way to practice.

What you will learn in this video: Creating a responsive footer with Bootstrap 5 Designing creative footer layouts without custom CSS Adding social icons & useful links in the footer Beginner-friendly Bootstrap 5 project This project is perfect for beginners who want to practice and learn Bootstrap 5 basics.

HTML with NO CSS

                            
                                <!DOCTYPE html>
<html>
<head>
	<title>Bootstrap 5 Footer</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
</head>
<body>

<footer class="bg-dark text-white pt-5 pb-4">

	<div class="container text-center text-md-left">

		<div class="row text-center text-md-left">

			<div class="col-md-3 col-lg-3 col-xl-3 mx-auto mt-3">
				<h5 class="text-uppercase mb-4 font-weight-bold text-warning">Company Name</h5>
				<p>Here you can use rows and columns to organize your footer content. Lorem ipsum dolor sit amet,
          ital consectetur lorem ipsum dolor sit amet adipisicing elit.</p>
				
			</div>

			<div class="col-md-2 col-lg-2 col-xl-2 mx-auto mt-3">
				<h5 class="text-uppercase mb-4 font-weight-bold text-warning">Products</h5>
			<p>
				<a href="#" class="text-white" style="text-decoration: none;"> TheProviders</a>
			</p>
			<p>
				<a href="#" class="text-white" style="text-decoration: none;"> Creativity</a>
			</p>
			<p>
				<a href="#" class="text-white" style="text-decoration: none;"> SourceFiles</a>
			</p>
			<p>
				<a href="#" class="text-white" style="text-decoration: none;"> bootstrap 5 alpha</a>
			</p>

			</div>

			<div class="col-md-3 col-lg-2 col-xl-2 mx-auto mt-3">
				<h5 class="text-uppercase mb-4 font-weight-bold text-warning">Useful links</h5>
			<p>
				<a href="#" class="text-white" style="text-decoration: none;"> Your Account</a>
			</p>
			<p>
				<a href="#" class="text-white" style="text-decoration: none;"> Become an Affiliates</a>
			</p>
			<p>
				<a href="#" class="text-white" style="text-decoration: none;">Shipping Rates</a>
			</p>
			<p>
				<a href="#" class="text-white" style="text-decoration: none;"> Help</a>
			</p>
			</div>

			<div class="col-md-4 col-lg-3 col-xl-3 mx-auto mt-3">
				<h5 class="text-uppercase mb-4 font-weight-bold text-warning" >Contact</h5>
				<p>
					<i class="fas fa-home mr-3"></i>New York, NY 2333, US
				</p>
				<p>
					<i class="fas fa-envelope mr-3"></i>theproviders98@gmail.com
				</p>
				<p>
					<i class="fas fa-phone mr-3"></i>+92 3162859445
				</p>
				<p>
					<i class="fas fa-print	 mr-3"></i>+01 335 633 77
				</p>
			</div>
			
		</div>

		<hr class="mb-4">

		<div class="row align-items-center">

			<div class="col-md-7 col-lg-8">
				<p>	Copyright ©2020 All rights reserved by:
					<a href="#" style="text-decoration: none;">
						<strong class="text-warning">The Providers</strong>
					</a></p>
				
			</div>

			<div class="col-md-5 col-lg-4">
				<div class="text-center text-md-right">

					<ul class="list-unstyled list-inline">
						<li class="list-inline-item">
							<a href="#" class="btn-floating btn-sm text-white" style="font-size: 23px;"><i class="fab fa-facebook"></i></a>
						</li>
						<li class="list-inline-item">
							<a href="#" class="btn-floating btn-sm text-white" style="font-size: 23px;"><i class="fab fa-twitter"></i></a>
						</li>
						<li class="list-inline-item">
							<a href="#" class="btn-floating btn-sm text-white" style="font-size: 23px;"><i class="fab fa-google-plus"></i></a>
						</li>
						<li class="list-inline-item">
							<a href="#" class="btn-floating btn-sm text-white" style="font-size: 23px;"><i class="fab fa-linkedin-in"></i></a>
						</li>
						<li class="list-inline-item">
							<a href="#" class="btn-floating btn-sm text-white" style="font-size: 23px;"><i class="fab fa-youtube"></i></a>
						</li>
					</ul>
					
				</div>
				
			</div>
			
		</div>

	</div>
	
</footer>

</body>
</html>

Download Code Files