My question is not as straightforward as the title suggests, but I couldn't think of a better one.
Initial Configuration:
I am using Bootstrap v4.0.0-alpha.2 and I removed this simple sidebar. I also added flex: true in my _library-variable-overrides.scss (using css-burrito) just to test it out, so I'm open to turning it off. ;-)
What I Aim to Achieve:
I want a button in the sidebar that is aligned at the bottom. Ideally, centered horizontally within the sidebar with about 1em margin from the bottom.
Current Code Setup:
_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">
<a href="#">Brand</a>
</li>
<li>
<a href="#">Item 1</a>
</li>
<li>
<a href="#">Item 2</a>
</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 main concern is with the logout button. My attempt was adding this code snippet:
.sidenav-nav {
height: 100%;
}
#logout {
position: absolute;
bottom: 1em;
}
While it met my requirements on a desktop browser, upon switching to mobile view in Chrome, the logout button vanished completely.