How to Create a Sticky and Split Footer in Bootstrap ?
A sticky footer is a layout element used in web design that maintains a web page’s footer fixed at the bottom of the viewport, no matter the content’s height. This design feature improves the user experience and gives the website an attractive look by ensuring the footer is visible as users scroll through the page.
Approach
- Create the layout of the web page, Bootstrap classes such as
d-flex
,flex-column
, andvh-100
are applied to the<body>
element to create a flexbox layout that stretches the full height of the viewport and arranges content in a column. - The
fixed-bottom
class in the footer ensures that it remains fixed at the bottom of the viewport, regardless of scrolling behavior, providing a sticky footer functionality. - For fixing footer height, Specify a fixed height for the footer to prevent it from overlapping with the content.
- Set the ‘bottom’ property to 0 to position the footer at the bottom of the viewport.
- Ensure the footer spans the full width of the viewport by setting the width to 100%.
- For splitting the footer use Bootstrap float-right class to the element.
Example: Implementation of Creating a Sticky Footer in Bootstrap.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Sticky Footer</title>
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body class="d-flex flex-column vh-100">
<main class="flex-fill">
<h1 class="text-center">
Sticky Footer in Bootstrap
</h1>
<h4>This program is designed to take you
on a transformative journey from mastering
Data Structures and Algorithms (DSA) to
becoming a proficient Developer or a Data
Scientist.Whether you aspire to become a
front-end developer, back-end developer,
full-stack developer,data scientist or
specialize in a specific tech-stack,this
program provides the essential building
blocks for your coding journey starting
right from basic programming to building
applications. This program is designed to
take you on a transformative journey from
mastering Data Structures and Algorithms
(DSA) to becoming a proficient
Developer or a Data Scientist. Whether you
aspire to become a front-end developer,
back-end developer, full-stack developer,
data scientist or specialize in a specific
tech-stack, this program provides the
essential buildin gblocks for your coding
journey starting right from basic
programming to building applications.
This program is designed to take you on
a transformative journey from mastering
Data Structures and Algorithms (DSA) to
becoming a proficient Developer or a Data
Scientist.
Whether you aspire to become a front-end developer,
back-end developer, full-stack developer, data scientist
or specialize in a specific tech-stack, this program
provides the essential building blocks for your
coding journey starting right from basic programming
to building applications.
</h4>
</main>
<footer class="footer mt-auto py-3 bg-dark
fixed-bottom text-white">
<div class="container">
<span class="text-white">© 2024 My Website</span>
<ul class="list-inline float-right mb-0">
<li class="list-inline-item">
<a href="#" class="text-white">Privacy</a>
</li>
<li class="list-inline-item">
<a href="#" class="text-white">Terms</a>
</li>
<li class="list-inline-item">
<a href="#" class="text-white">Contact</a>
</li>
</ul>
</div>
</footer>
</body>
</html>
Output:
Contact Us