title: How to bottom align a button in bootstrap 4?
body: <p><em>My question is actually more complex then the title, but I couldn't come up with a better one.</em></p>
  <h3>Initial Setup:</h3>
  <p>I use Bootstrap <code>v4.0.0-alpha.2</code> and I ripped out <a href="http://startbootstrap.com/template-overviews/simple-sidebar/" rel="nofollow noreferrer">this simple sidebar</a>. I'm not sure why and if it's relevant but I also set <code>flex: true</code> in my <code>_library-variable-overrides.scss</code> (I use <a href="http://css-burrito.com/" rel="nofollow noreferrer">css-burrito</a>) but since I only set it to try it out, I'm probably okay with turning it off. ;-)</p>
  <h3>What I want to do:</h3>
  <p>I would like to have a button in the sidebar that is bottom aligned. Ideally it's centered horizontally in the sidebar and has about <code>1em</code> margin to the bottom.</p>
  <h3>What my code looks like:</h3>
  <p><code>_shell.scss</code> &amp; <code>_sidenav.scss</code>:</p>
  <pre><code>#shell-wrapper {
      padding-left: 0;
      transition: all 0.5s ease;
  }
  
  #shell-wrapper.toggled {
      padding-left: 250px;
  
      #shell-content-wrapper {
          position: absolute;
          margin-right: -250px;
      }
  }
  
  @media(min-width:768px) {
      #shell-wrapper {
          padding-left: 250px;
      }
      
      #shell-wrapper.toggled {
          padding-left: 0;
  
          #shell-content-wrapper {
              position: relative;
              margin-right: 0;
          }
      }
  
      #shell-content-wrapper {
          padding: 20px;
          position: relative;
      }
  }
  
  
  #sidenav-wrapper {
      z-index: 1000;
      position: fixed;
      left: 250px;
      width: 0;
      height: 100%;
      margin-left: -250px;
      overflow-y: auto;
      background: #000;
      transition: all 0.5s ease;
  }
  
  #shell-wrapper.toggled { 
      #sidenav-wrapper {
          width: 250px;
      }
  }
  
  #shell-content-wrapper {
      width: 100%;
      position: absolute;
      padding: 15px;
  }
  
  /* Sidenav Styles */
  
  .sidenav-nav {
      position: absolute;
      top: 0;
      width: 250px;
      margin: 0;
      padding: 0;
      list-style: none;
  
      li {
          text-indent: 20px;
          line-height: 40px;
  
          a {
              display: block;
              text-decoration: none;
              color: #999999;
          }
  
          a:hover {
              text-decoration: none;
              color: #fff;
              background: rgba(255, 255, 255, 0.2);
          }
  
          a:active, a:focus {
              text-decoration: none;
          }
      }
  
      &gt;.sidenav-brand {
          height: 65px;
          font-size: 18px;
          line-height: 60px;
  
          a {
              color: #999999;
          }
  
          a:hover {
              color: #fff;
              background: none;
          }
      }
  }
  
  @media(min-width:768px) {
      #sidenav-wrapper {
          width: 250px;
      }
      
      #shell-wrapper.toggled #sidenav-wrapper {
          width: 0;
      }
  
  }
  </code></pre>
  <p>and <code>index.html</code>:</p>
  <pre><code>&lt;div id=&quot;shell-wrapper&quot; class=&quot;toggled&quot;&gt;
    &lt;div id=&quot;sidenav-wrapper&quot;&gt;
      &lt;ul class=&quot;sidenav-nav&quot;&gt;
        &lt;li class=&quot;sidenav-brand&quot;&gt;
          &lt;a href=&quot;#&quot;&gt;Brand&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href=&quot;#&quot;&gt;Item 1&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href=&quot;#&quot;&gt;Item 2&lt;/a&gt;
        &lt;/li&gt;
        &lt;li id=&quot;logout&quot;&gt;
          &lt;button class=&quot;btn btn-danger-outline&quot;&gt;Logout&lt;/button&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot;&gt;
      &amp;#9776;
    &lt;/button&gt;
    &lt;div id=&quot;shell-content-wrapper&quot;&gt;
      &lt;div class=&quot;container-fluid&quot;&gt;
        &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col-lg-12&quot;&gt;
            &lt;!--Main Content Here--&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>The logout button is one in question. I just tried doing it as a <code>&lt;li&gt;</code> of the <code>sidenav-nav</code> but I'm not tied to this setup.</p>
  <h3>What I have tried so far:</h3>
  <p><em>a lot!</em></p>
  <p>What came closest to what I want was adding this:</p>
  <pre><code>.sidenav-nav {
      height: 100%;
  }
  
  #logout {
      position: absolute;
      bottom: 1em;
  }
  </code></pre>
  <p>It's pretty close to my goal on a desktop browser, but hitting that <em>show me this on a phone</em> button in chrome, the logout button is just gone.</p>