How to Create a Sticky and Split Footer in Bootstrap ?

Last Updated : 28 Mar, 2024

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, and vh-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.

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</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>