How to create a responsive Bootstrap 5 page footer with social media icons.
Final output:
1. Let’s start with the footer tag. Add a row inside a container with 5 columns.
<footer>
<div class="container">
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
</div>
</footer>Add your logo and headings for each column.
<footer>
<div class="container">
<div class="row">
<div class="col">
<h3 class="fw-bold">Coding Yaar</h3>
</div>
<div class="col">
<h4>Menu</h4>
</div>
<div class="col">
<h4>More</h4>
</div>
<div class="col">
<h4>Categories</h4>
</div>
<div class="col">
<h4>Social Media Links</h4>
</div>
</div>
</div>
</footer>Output:
2. The col class sets an equal width for all columns. The first and last columns need to be wider. Specify column size with breakpoints depending on your content.
<footer>
<div class="container">
<div class="row">
<div class="col-6 col-md-4">
<h3 class="fw-bold">Coding Yaar</h3>
</div>
<div class="col">
<h4>Menu</h4>
</div>
<div class="col">
<h4>More</h4>
</div>
<div class="col">
<h4>Categories</h4>
</div>
<div class="col-6 col-lg-3">
<h4>Social Media Links</h4>
</div>
</div>
</div>
</footer>Add the contact details and links in each column.
Bootstrap class references:
list-unstyled: removes bullets from list items
pt-2: padding-top
mb-2: margin-bottom
py-1: top and bottom padding
<footer>
<div class="container">
<div class="row">
<div class="col-6 col-md-4">
<h3 class="fw-bold">Coding Yaar</h3>
<p class="pt-2">321, Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="mb-2">0987654321</p>
<p>1234567890</p>
</div>
<div class="col">
<h4>Menu</h4>
<ul class="list-unstyled pt-2">
<li class="py-1">Home</li>
<li class="py-1">Shorts</li>
<li class="py-1">About</li>
<li class="py-1">Contact</li>
</ul>
</div>
<div class="col">
<h4>More</h4>
<ul class="list-unstyled pt-2">
<li class="py-1">Landing Pages</li>
<li class="py-1">FAQs</li>
</ul>
</div>
<div class="col">
<h4>Categories</h4>
<ul class="list-unstyled pt-2">
<li class="py-1">Navbars</li>
<li class="py-1">Cards</li>
<li class="py-1">Buttons</li>
<li class="py-1">Carousels</li>
</ul>
</div>
<div class="col-6 col-lg-3">
<h4>Social Media Links</h4>
</div>
</div>
</div>
</footer>Output:
3. Let’s change the background and font color for the footer. Add some padding-top too.
<footer class="bg-dark text-light pt-5">
...
</footer>For the last column, I’m using Bootstrap icons.
Bootstrap class references:
text-lg-end: Align text to the right on large screens
fs-2: font size
me-3: margin-right
<div class="col-6 col-lg-3 text-lg-end">
<h4>Social Media Links</h4>
<div class="social-media pt-2">
<a href="#" class="text-light fs-2 me-3"><i class="bi bi-facebook"></i></a>
<a href="#" class="text-light fs-2 me-3"><i class="bi bi-pinterest"></i></a>
<a href="#" class="text-light fs-2 me-3"><i class="bi bi-instagram"></i></a>
<a href="#" class="text-light fs-2"><i class="bi bi-linkedin"></i></a>
</div>
</div>Output:
4. Add right and left padding for the container.
<div class="container px-5">
...
</div>At the bottom, add a horizontal rule adjacent to the row.
Create a div below it and add a copyright line and links to terms and privacy pages. Use Bootstrap’s flex classes to place them at opposite ends. Add top and bottom padding too.
<hr>
<div class="d-sm-flex justify-content-between py-1">
<p>2023 © Coding Yaar. All Rights Reserved. </p>
<p>
<a href="#">Terms of use</a>
<a href="#"> Privacy policy</a>
</p>
</div>Style the links.
<p>
<a href="#" class="text-light text-decoration-none pe-4">Terms of use</a>
<a href="#" class="text-light text-decoration-none"> Privacy policy</a>
</p>Output:
Video tutorial for Bootstrap 5 footer with social media icons:
Final Output Code for Responsive Bootstrap Footer Template:
HTML
<footer class="bg-dark text-light pt-5">
<div class="container px-5">
<div class="row">
<div class="col-6 col-lg-4">
<h3 class="fw-bold">Coding Yaar</h3>
<p class="pt-2">321, Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="mb-2">0987654321</p>
<p>1234567890</p>
</div>
<div class="col">
<h4>Menu</h4>
<ul class="list-unstyled pt-2">
<li class="py-1">Home</li>
<li class="py-1">Shorts</li>
<li class="py-1">About</li>
<li class="py-1">Contact</li>
</ul>
</div>
<div class="col">
<h4>More</h4>
<ul class="list-unstyled pt-2">
<li class="py-1">Landing Pages</li>
<li class="py-1">FAQs</li>
</ul>
</div>
<div class="col">
<h4>Categories</h4>
<ul class="list-unstyled pt-2">
<li class="py-1">Navbars</li>
<li class="py-1">Cards</li>
<li class="py-1">Buttons</li>
<li class="py-1">Carousels</li>
</ul>
</div>
<div class="col-6 col-lg-3 text-lg-end">
<h4>Social Media Links</h4>
<div class="social-media pt-2">
<a href="#" class="text-light fs-2 me-3"><i class="bi bi-facebook"></i></a>
<a href="#" class="text-light fs-2 me-3"><i class="bi bi-pinterest"></i></a>
<a href="#" class="text-light fs-2 me-3"><i class="bi bi-instagram"></i></a>
<a href="#" class="text-light fs-2"><i class="bi bi-linkedin"></i></a>
</div>
</div>
</div>
<hr>
<div class="d-sm-flex justify-content-between py-1">
<p>2023 © Coding Yaar. All Rights Reserved. </p>
<p>
<a href="#" class="text-light text-decoration-none pe-4">Terms of use</a>
<a href="#" class="text-light text-decoration-none"> Privacy policy</a>
</p>
</div>
</div>
</footer>If you have any doubts or stuck somewhere, you can reach out through Coding Yaar's Discord server.
