title: Bootstrap mt-auto does not align bottom
body: <p>I have a side bar as you can see in the HTML.<br>
  I would like to align <strong>User01</strong> and <strong>Logout</strong> items at the bottom.  </p>
  
  <p>I've assigned <strong>mt-auto</strong> class to the <strong>ul</strong> item but it didn't work.<br>
  Then I have created another division with the class <strong>mt-auto</strong> however didn't help as well ,any idea how to align them bottom in Bootstrap?  </p>
  
  <p>Is it better to use d-flex in align item end?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;    
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
      integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"&gt;
    &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
      integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"&gt;
  
    &lt;link rel="stylesheet" href="css/style.css"&gt;
    &lt;title&gt;Control Panel&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;div class="container m-0 p-0"&gt;
      &lt;div class="row p-0"&gt;
        &lt;div class="sidebar col-lg-2 col-md-3 col-sm-4 d-block bg-secondary px-4 pt-3 bg-dark text-light"&gt;        
          &lt;div class="d-flex align-items-start flex-column"&gt;
            &lt;a href="index.html" class="navbar-brand text-white mb-3"&gt; &lt;div class="d-inline"&gt;Admin Panel&lt;/div&gt;&lt;/a&gt;
  
            &lt;ul class="navbar-nav text-white"&gt;
              &lt;li class="nav-item"&gt;
                &lt;a href="index.html" class="nav-link text-white active"&gt;Dashboard&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                &lt;a href="tasks.html" class="nav-link text-white"&gt;Tasks&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                &lt;a href="categories.html" class="nav-link text-white"&gt;Categories&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                &lt;a href="users.html" class="nav-link text-white"&gt;Users&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
            &lt;div class="mt-auto"&gt;
            &lt;ul class="navbar-nav text-white"&gt;
              &lt;li class="nav-item dropdown"&gt;
                &lt;a href="" class="nav-link dropdown-toggle text-white" data-toggle="dropdown"&gt;
                  &lt;i class="fas fa-user"&gt;&lt;/i&gt; User01
                &lt;/a&gt;
                &lt;div class="dropdown-menu"&gt;
                  &lt;a href="profile.html" class="dropdown-item"&gt;&lt;i class="fas fa-user-circle"&gt;&lt;/i&gt; Profile&lt;/a&gt;
                  &lt;a href="settings.html" class="dropdown-item"&gt;&lt;i class="fas fa-cog"&gt;&lt;/i&gt; Settings&lt;/a&gt;
                &lt;/div&gt;
              &lt;/li&gt;
              &lt;li class="nav-item"&gt;
                &lt;a href="login.html" class="nav-link text-white"&gt;
                  &lt;i class="fas fa-sign-out-alt"&gt;&lt;/i&gt; Logout
                &lt;/a&gt;
              &lt;/li&gt;            
            &lt;/ul&gt;
          &lt;/div&gt;
  
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>