How to Create a Sticky Footer in Bootstrap ?

Last Updated : 18 Mar, 2024

In any webpage footer is the section that occurs at the end of the page. In many web pages, we can see that footers are sticky which means that whether we scroll up or down the page the footer will stay in its place which is at the bottom of the page.

How to implement a sticky footer using Bootstrap

In Bootstrap, there are predefined classes given and our task is to assign that class to the element to stick any element at the bottom of the web page. The steps to accomplish this are written below:

Create a new HTML file named index.html.
Include a Bootstrap CDN link using the link tag.
Now, declare some random text so that the page will become scrollable.
Declare the footer and add the relevant classes to it so that bootstrap styles get applied.
We will give class footer and fixed-bottom so that the footer can be declared as footer and then it will get styling to become sticky.
Now, add any content that you want to show inside the footer.

Example: The below code explains how you can use Bootstrap to create a sticky footer.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
    <title>
        Sticky Footer with Bootstrap
    </title>

    <!-- Bootstrap CSS CDN -->
    <link rel="stylesheet"
          href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
</head>

<body>
    <div class="container">
        <h1>Scrollable Content</h1>
        <p>
            GeeksforGeeks is a leading platform that
            provides computer science resources and 
              coding challenges for programmers
            and technology enthusiasts, along with 
              interview and exam preparations for
            upcoming aspirants. With a strong emphasis 
              on enhancing coding skills and
            knowledge, it has become a
            trusted destination for over 12 million plus
            registered users worldwide.
            The platform offers a vast collection of
            tutorials, practice problems,
            interview tutorials, articles, and courses,
            covering various domains of computer science.
        </p>
        <p>
            Our exceptional mentors hailing from top
            colleges & organizations have the
            ability to guide you on a journey from the
            humble beginnings of coding to
            the pinnacle of expertise. Under their guidance
            watch your skills flourish
            as we lay the foundation and help you conquer
            the world of coding.
        </p>
        <p>
            Our brand is built on the pillars of expertise,
            accessibility, and community.
            We strive to empower individuals to enhance
            their programming skills, to
            bridge the gap between academia and industry,
            and provide a supportive
            community to the learners. GeeksforGeeks is
            committed to promoting
            technological advancement and providing
            opportunities for growth in the
            ever-evolving field of computer science.
        </p>
        <p>
            GeeksforGeeks is a leading platform that
            provides computer science resources and 
              coding challenges for programmers
            and technology enthusiasts, along with 
              interview and exam preparations for
            upcoming aspirants. With a strong emphasis 
              on enhancing coding skills and knowledge, 
              it has become a trusted destination for 
              over 12 million plus registered users
            worldwide. The platform offers a vast 
              collection of tutorials, practice
            problems, interview tutorials, articles, 
              and courses, covering various domains
            of computer science.
        </p>
        <p>
            Our exceptional mentors hailing from top
            colleges & organizations have the ability 
              to guide you on a journey from the
            humble beginnings of coding to
            the pinnacle of expertise. Under their guidance
            watch your skills flourish as we lay the 
              foundation and help you conquer
            the world of coding.
        </p>
        <p>
            Our brand is built on the pillars of expertise,
            accessibility, and community. We strive to 
              empower individuals to enhance their programming
            skills, to bridge the gap between academia 
              and industry, and provide a supportive
            community to the learners. GeeksforGeeks is
            committed to promoting technological advancement 
              and providing opportunities for growth in
            the ever-evolving field of computer science.
        </p>
        <p>
            GeeksforGeeks is a leading platform that
            provides computer science resources and 
              coding challenges for programmers
            and technology enthusiasts, along with 
              interview and exam preparations for
            upcoming aspirants. With a strong emphasis 
              on enhancing coding skills and
            knowledge, it has become a
            trusted destination for over 12 million plus
            registered users worldwide. The platform 
              offers a vast collection of tutorials, practice
            problems, interview tutorials, articles, and courses,
            covering various domains of computer science.
        </p>
        <p>
            Our exceptional mentors hailing from top
            colleges & organizations have the
            ability to guide you on a journey from the
            humble beginnings of coding to the pinnacle 
              of expertise. Under their guidance
            watch your skills flourish
            as we lay the foundation and help you conquer
            the world of coding.
        </p>
        <p>
            Our brand is built on the pillars of expertise,
            accessibility, and community. We strive to 
              empower individuals to enhance
            their programming skills, to bridge the gap 
              between academia and industry, and provide a
            supportive community to the learners. 
              GeeksforGeeks is committed to promoting
            technological advancement and providing
            opportunities for growth in
            the ever-evolving field of computer science.
        </p>
        <p>
            GeeksforGeeks is a leading platform that
            provides computer science
            resources and coding challenges for programmers
            and technology enthusiasts, along with interview 
              and exam preparations for upcoming aspirants.
            With a strong emphasis on enhancing coding skills and
            knowledge, it has become a trusted destination 
              for over 12 million plus registered users
            worldwide. The platform offers a vast collection of
            tutorials, practice problems, interview tutorials, 
              articles, and courses, covering various domains
            of computer science.
        </p>
        <p>
            Our exceptional mentors hailing from top
            colleges & organizations have the
            ability to guide you on a journey from the
            humble beginnings of coding to the pinnacle 
              of expertise. Under their guidance
            watch your skills flourish
            as we lay the foundation and help you conquer
            the world of coding.
        </p>
        <p>
            Our brand is built on the pillars of expertise,
            accessibility, and community. We strive to 
              empower individuals to enhance their programming
            skills, to bridge the gap between academia and 
              industry, and provide a supportive community to 
              the learners. GeeksforGeeks is
            committed to promoting technological advancement 
              and providing opportunities for growth in
            the ever-evolving field of computer science.
        </p>
    </div>
    <footer class="footer fixed-bottom bg-primary">
        <div class="container text-center">
            <span class="text-white">
                This is the sticky footer.
            </span>
        </div>
    </footer>

    <!-- Bootstrap JavaScript CDN -->
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js">
    </script>
</body>

</html>