title: bootstrap template , how to stick sidebar to the bottom of page
body: <p>I'm newbie to bootstrap and I'm using bootstrap 5 to design a template for my project , and here is the thing: I want  my dark sidebar to stick to the bottom of the page. The only solution I found is to add a height property but. But what I want <strong>is to make the sidebar stick to the bottom</strong> and here is my code:</p>
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3&quot; crossorigin=&quot;anonymous&quot;&gt;
  &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;/lib/twitter-bootstrap/js/bootstrap.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;/lib/jquery/jquery.js&quot;&gt;&lt;/script&gt;
      &lt;link href=&quot;/css/sitet.css&quot; rel=&quot;stylesheet&quot; /&gt;
      &lt;style&gt;
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;nav class=&quot;navbar navbar-dark bg-dark p-3&quot;&gt;
          &lt;div class=&quot;d-flex col-12 col-md-3 col-lg-2 mb-2 mb-lg-0 flex-wrap flex-md-nowrap justify-content-between &quot;&gt;
              &lt;a class=&quot;navbar-brand &quot; href=&quot;#&quot;&gt;
               Clinique Mangement
              &lt;/a&gt;
              &lt;button class=&quot;navbar-toggler d-md-none collapsed mb-3&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#sidebar&quot; aria-controls=&quot;sidebar&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&gt;
          &lt;div class=&quot;col-12 col-md-4 col-lg-2&quot;&gt;
              &lt;input class=&quot;form-control form-control-dark&quot; type=&quot;text&quot; placeholder=&quot;Search&quot; aria-label=&quot;Search&quot;&gt;
          &lt;/div&gt;
          &lt;div class=&quot;col-12 col-md-5 col-lg-8 d-flex align-items-center justify-content-md-end mt-3 mt-md-0&quot;&gt;
           
              &lt;div class=&quot;dropdown&quot;&gt;
                  &lt;button class=&quot;btn btn-secondary dropdown-toggle&quot; type=&quot;button&quot; id=&quot;dropdownMenuButton&quot; data-toggle=&quot;dropdown&quot; aria-expanded=&quot;false&quot;&gt;
                      Hello, Admin
                  &lt;/button&gt;
                  &lt;ul class=&quot;dropdown-menu&quot; aria-labelledby=&quot;dropdownMenuButton&quot;&gt;
                      &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Settings&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Messages&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Sign out&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
      &lt;div class=&quot;container-fluid&quot;&gt;
          &lt;div class=&quot;row&quot;&gt;
              &lt;nav id=&quot;sidebar&quot; class=&quot;col-md-3 col-lg-2 d-md-block bg-dark sidebar collapse&quot;&gt;
                  &lt;!-- sidebar content goes in here --&gt;
  
                  &lt;div class=&quot;position-sticky pt-md-5 &quot;&gt;
                      &lt;ul class=&quot;nav flex-column &quot;&gt;
                          &lt;li class=&quot;nav-item&quot;&gt;
                              &lt;a class=&quot;nav-link active&quot; aria-current=&quot;page&quot; href=&quot;#&quot;&gt;
                                  &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;24&quot; height=&quot;24&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; class=&quot;feather feather-home&quot;&gt;&lt;path d=&quot;M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z&quot;&gt;&lt;/path&gt;&lt;polyline points=&quot;9 22 9 12 15 12 15 22&quot;&gt;&lt;/polyline&gt;&lt;/svg&gt;
                                  &lt;span class=&quot;ml-2&quot;&gt;Dashboard&lt;/span&gt;
                              &lt;/a&gt;
                          &lt;/li&gt;
                             &lt;li class=&quot;nav-item&quot;&gt;
                              &lt;a class=&quot;nav-link active&quot; aria-current=&quot;page&quot; href=&quot;#&quot;&gt;
                                    &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;24&quot; height=&quot;24&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; class=&quot;feather feather-users&quot;&gt;&lt;path d=&quot;M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2&quot;&gt;&lt;/path&gt;&lt;circle cx=&quot;9&quot; cy=&quot;7&quot; r=&quot;4&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M23 21v-2a4 4 0 0 0-3-3.87&quot;&gt;&lt;/path&gt;&lt;path d=&quot;M16 3.13a4 4 0 0 1 0 7.75&quot;&gt;&lt;/path&gt;&lt;/svg&gt;
                                  &lt;span class=&quot;ml-2&quot;&gt;Profile&lt;/span&gt;
                              &lt;/a&gt;
                          &lt;/li&gt;
                          
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/nav&gt;
              &lt;main class=&quot;col-md-9 ml-sm-auto col-lg-10 px-md-4 py-4&quot;&gt;
                 &lt;div class=&quot;page-title&quot;&gt;
      &lt;div class=&quot;title_left&quot;&gt;
          &lt;h3&gt;Add Patient&lt;/h3&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
        
          
  
              &lt;/main&gt;
          &lt;/div&gt;
      &lt;/div&gt;
        
   
      &lt;!-- insert scripts here --&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/4XzaH.png" rel="nofollow noreferrer">and here is what it look the template</a></p>
  <p>`</p>