Currently, I am working on developing a traditional sidebar layout for the left portion of my template using Bootstrap 4.
Here is the code snippet I have implemented:
<nav class="team-left-column col-12 col-md-4 col-lg-2" style="background-color:#6c757d;">
<div class="dashboard-sidebar js-sticky top-0 px-3 px-md-4 px-lg-4 overflow-auto">
<ul class="sidebar navbar-nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">
<span data-feather="home"></span>
Dashboard <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file"></span>
Orders
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="shopping-cart"></span>
Products
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<spandata-feather="users"></span>
Customers
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="bar-chart-2"></span>
Reports
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="layers"></span>
Integrations
</a>
</li>
</ul>
</div>
</nav>
https://i.sstatic.net/BtLGz.png
I am facing an issue where the Y size of the sidebar is not showing properly. I want it to be responsive without specifying style="height:1280px;". My goal is for it to display from the navbar to the very bottom of the screen. Even though I am following examples from Bootstrap, it still does not work as expected. Can anyone identify what I might be doing wrong?