Simple Footer Code Snippet


This code snippet is a simple footer component built using Bootstrap, which is placed at the bottom of webpages to provide quick navigation links, a logo, and social media icons, while also adjusting its layout to the screen size and providing consistent styling. It allows users to quickly navigate the website, access the company’s social media profiles, and showcase the company’s branding.

<footer class="py-4">
	<div class="container">
		<div class="row align-items-center py-4">
			<div class="col-12 col-lg-3 text-center text-lg-start"><img alt="Free Frontend Logo" class="img-fluid mb-3" height="" src="https://freefrontend.dev/wp-content/uploads/free-frontend-logo.png" width="300"></div>
			<div class="col-12 col-lg-6 navbar-expand text-center">
				<ul class="list-unstyled d-block d-lg-flex justify-content-center mb-3 mb-lg-0">
					<li class="nav-item">
						<a class="text-dark text-decoration-none me-lg-3" href="">Home</a>
					</li>
					<li class="nav-item">
						<a class="text-dark text-decoration-none me-lg-3" href="">About</a>
					</li>
					<li class="nav-item">
						<a class="text-dark text-decoration-none me-lg-3" href="">Shop</a>
					</li>
					<li class="nav-item">
						<a class="text-dark text-decoration-none me-lg-3" href="">Gallery</a>
					</li>
					<li class="nav-item">
						<a class="text-dark text-decoration-none" href="">Contact</a>
					</li>
				</ul>
			</div>
			<div class="col-12 col-lg-3 text-center text-lg-end">
				<a class="me-2" href=""><svg class="bi bi-pinterest text-primary" fill="currentColor" height="16" viewbox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
				<path d="M8 0a8 8 0 0 0-2.915 15.452c-.07-.633-.134-1.606.027-2.297.146-.625.938-3.977.938-3.977s-.239-.479-.239-1.187c0-1.113.645-1.943 1.448-1.943.682 0 1.012.512 1.012 1.127 0 .686-.437 1.712-.663 2.663-.188.796.4 1.446 1.185 1.446 1.422 0 2.515-1.5 2.515-3.664 0-1.915-1.377-3.254-3.342-3.254-2.276 0-3.612 1.707-3.612 3.471 0 .688.265 1.425.595 1.826a.24.24 0 0 1 .056.23c-.061.252-.196.796-.222.907-.035.146-.116.177-.268.107-1-.465-1.624-1.926-1.624-3.1 0-2.523 1.834-4.84 5.286-4.84 2.775 0 4.932 1.977 4.932 4.62 0 2.757-1.739 4.976-4.151 4.976-.811 0-1.573-.421-1.834-.919l-.498 1.902c-.181.695-.669 1.566-.995 2.097A8 8 0 1 0 8 0z"></path></svg></a> <a class="me-2" href=""><svg class="bi bi-twitter text-primary" fill="currentColor" height="16" viewbox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
				<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"></path></svg></a> <a class="me-2" href=""><svg class="bi bi-facebook text-primary" fill="currentColor" height="16" viewbox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
				<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"></path></svg></a>
			</div>
		</div>
		<div class="row pb-3">
			<div class="col-12 text-center small text-muted">
				© 2023 FreeFrontend.dev. All rights reserved. <a class="d-block d-lg-inline text-muted mx-1" href="">Privacy Policy</a> <a class="d-block d-lg-inline text-muted mx-1" href="">Terms of Service</a>
			</div>
		</div>
	</div>
</footer>
To top