How to Make Bootstrap 5 Footer Fixed at the Bottom

1 year ago admin Bootstrap

In today's lesson, we will see how to make Bootstrap 5 footer fixed at the bottom of the page, sometimes when you are working on a project with Bootstrap 5 you notice that the footer is not at the bottom if the body height is less than the viewport height.


Fix the footer at the bottom

So to achieve that we add the class 'fixed-bottom' to the footer.

                                                        
                                                                                                                        
<footer className="fixed-bottom">
    <nav className="navbar navbar-expand-lg navbar-light bg-light">
          <div className="container-fluid">
               <ul className="navbar-nav mx-auto mb-2 mb-lg-0">
                   <li className="nav-item">
                       <a className="nav-link active" aria-current="page" href="#">
                          <i className="bi bi-c-circle"></i> DCoding 2023.
                       </a>
                   </li>
               </ul>
          </div>
     </nav>
</footer>