How to bottom align a button in bootstrap 4? - css

Question

My question is actually more complex then the title, but I couldn't come up with a better one.
Initial Setup:
I use Bootstrap v4.0.0-alpha.2 and I ripped out this simple sidebar. I'm not sure why and if it's relevant but I also set flex: true in my _library-variable-overrides.scss (I use css-burrito) but since I only set it to try it out, I'm probably okay with turning it off. ;-)
What I want to do:
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 1em margin to the bottom.
What my code looks like:
_shell.scss & _sidenav.scss:
#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;
}
}
>.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;
}
}
and index.html:
<div id="shell-wrapper" class="toggled">
<div id="sidenav-wrapper">
<ul class="sidenav-nav">
<li class="sidenav-brand">
Brand
</li>
<li>
Item 1
</li>
<li>
Item 2
</li>
<li id="logout">
<button class="btn btn-danger-outline">Logout</button>
</li>
</ul>
</div>
<button class="navbar-toggler" type="button">
☰
</button>
<div id="shell-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<!--Main Content Here-->
</div>
</div>
</div>
</div>
</div>
The logout button is one in question. I just tried doing it as a <li> of the sidenav-nav but I'm not tied to this setup.
What I have tried so far:
a lot!
What came closest to what I want was adding this:
.sidenav-nav {
height: 100%;
}
#logout {
position: absolute;
bottom: 1em;
}
It's pretty close to my goal on a desktop browser, but hitting that show me this on a phone button in chrome, the logout button is just gone.

Answer 1

i haven't worked with css-buritto, but you could look into giving the button a class or id and passing the position:relative argument you can then set a bottom: 1em and that should position the button at the bottom. alternativly you can also look into the other position elements like fixed that could also do the trick
like you mentioned a the end
#logout {
position: relative;
bottom: 1em;
}