How to bottom align a button in bootstrap 4?
<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>