title: How to do Sticky Bottom Navbar in Bootstrap 5?
body: <p>I want to do sticky footer like <a href="https://v5.getbootstrap.com/docs/5.0/examples/sticky-footer-navbar/" rel="nofollow noreferrer">this</a>, but even though i copied it from there, it does not look the same. When i zoom out the page, the navbar will stick to the top, not the bottom. Here is the screenshot:<a href="https://i.stack.imgur.com/oeZVN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oeZVN.png" alt="result i got" /></a></p>
  <p>Here is my code (which i have said, basically copy from that page):</p>
  <pre><code>&lt;head&gt;
      &lt;!-- Required meta tags --&gt;
      &lt;meta charset=&quot;utf-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
  
      &lt;!-- Bootstrap CSS --&gt;
      &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-alpha3/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;
          integrity=&quot;sha384-CuOF+2SnTUfTwSZjCXf01h7uYhfOBuxIhGKPbfEJ3+FqH/s6cIFN9bGr1HmAg4fQ&quot; crossorigin=&quot;anonymous&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css&quot;&gt;
      &lt;style&gt;
          .bd-placeholder-img {
              font-size: 1.125rem;
              text-anchor: middle;
              -webkit-user-select: none;
              -moz-user-select: none;
              user-select: none;
          }
  
          @media (min-width: 768px) {
              .bd-placeholder-img-lg {
                  font-size: 3.5rem;
              }
          }
      &lt;/style&gt;
      &lt;link href=&quot;css/styles.css&quot; rel=&quot;stylesheet&quot;&gt;
  
      &lt;title&gt;Hello, world!&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body class=&quot;d-flex flex-column h-100&quot;&gt;
      
      &lt;header&gt;
        &lt;!-- Fixed navbar --&gt;
        &lt;nav class=&quot;navbar navbar-expand-md navbar-dark fixed-top bg-dark&quot;&gt;
          &lt;div class=&quot;container-fluid&quot;&gt;
            &lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;Fixed navbar&lt;/a&gt;
            &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#navbarCollapse&quot; aria-controls=&quot;navbarCollapse&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
              &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
            &lt;/button&gt;
            &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarCollapse&quot;&gt;
              &lt;ul class=&quot;navbar-nav mr-auto mb-2 mb-md-0&quot;&gt;
                &lt;li class=&quot;nav-item active&quot;&gt;
                  &lt;a class=&quot;nav-link&quot; aria-current=&quot;page&quot; href=&quot;#&quot;&gt;Home&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class=&quot;nav-item&quot;&gt;
                  &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Link&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class=&quot;nav-item&quot;&gt;
                  &lt;a class=&quot;nav-link disabled&quot; href=&quot;#&quot; tabindex=&quot;-1&quot; aria-disabled=&quot;true&quot;&gt;Disabled&lt;/a&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
              &lt;form class=&quot;d-flex&quot;&gt;
                &lt;input class=&quot;form-control mr-2&quot; type=&quot;search&quot; placeholder=&quot;Search&quot; aria-label=&quot;Search&quot;&gt;
                &lt;button class=&quot;btn btn-outline-success&quot; type=&quot;submit&quot;&gt;Search&lt;/button&gt;
              &lt;/form&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/nav&gt;
      &lt;/header&gt;
      
          &lt;!-- Begin page content --&gt;
          &lt;main class=&quot;flex-shrink-0&quot;&gt;
            &lt;div class=&quot;container&quot;&gt;
              &lt;h1 class=&quot;mt-5&quot;&gt;Sticky footer with fixed navbar&lt;/h1&gt;
              &lt;p class=&quot;lead&quot;&gt;Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with &lt;code class=&quot;small&quot;&gt;padding-top: 60px;&lt;/code&gt; on the &lt;code class=&quot;small&quot;&gt;main &amp;gt; .container&lt;/code&gt;.&lt;/p&gt;
              &lt;p&gt;Back to &lt;a href=&quot;/docs/5.0/examples/sticky-footer/&quot;&gt;the default sticky footer&lt;/a&gt; minus the navbar.&lt;/p&gt;
            &lt;/div&gt;
          &lt;/main&gt;
          
          &lt;footer class=&quot;footer mt-auto py-3 bg-light&quot;&gt;
            &lt;div class=&quot;container&quot;&gt;
              &lt;span class=&quot;text-muted&quot;&gt;Place sticky footer content here.&lt;/span&gt;
            &lt;/div&gt;
          &lt;/footer&gt;
      &lt;/body&gt;
  </code></pre>
  <p>How to do sticky footer like the one from bootstrap example? Any help would be appreciated</p>