Issues with CSS positioning and list items - html

Question

I am trying to create a navigation sidebar with Angular and Bootstrap but my navigation items are not displaying the way they should.
APP Component HTML
<div class="container-fluid">
<div class="row" id="header">
<div class="col-md-12">
<app-admin-header></app-admin-header>
</div>
</div>
<div class="row">
<div class="col-md-2" id="sidebar-parent">
<app-sidebar-menu></app-sidebar-menu>
</div>
<div class="jumbotron col-md-10" id="content-parent">
<router-outlet></router-outlet>
</div>
</div>
</div>
APP Component CSS
#sidebar-parent {
position:relative;
top:0;
left:0;
}
#content-parent {
position:relative;
top:0;
left:0px;
}
HEADER HTML
<div id="header-wrapper">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<!--button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button-->
<div class="col-md-12">
<ul class="navbar-nav ml-auto">
<li class="sidebar-brand">
<a href="#">
</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Coupons</a>
</li>
</ul>
</div>
</nav>
</div>
HEADER CSS
#header-wrapper {
background: #35acdf;
margin-bottom: 7px;
}
.navbar {
background: #35acdf;
}
SIDEBAR HTML
<div id="page-wrapper">
<div id="page-viewport">
<div id="sidebar">
<div id="sidebar-header">
<a href="#" class="toggle-sidebar">Sidebar
<span class="pull-right">
<a href="#" class="toggle-sidebar btn btn-default">
<span class="fa fa-bars"></span>
</a>
</span>
</a>
</div>
<ul class="nav nav-pills nav-stacked">
<li><span class="fa fa-shopping-bag"></span> Dashboard</li>
<li><span class="fa fa-list"></span> Categories</li>
<li><span class="fa fa-lock"></span> Companies</li>
<li><span class="fa fa-industry"></span> Coupons</li>
<li><span class="fa fa-male"></span> Products</li>
<li><span class="fa fa-list"></span> Sales</li>
<li><span class="fa fa-lock"></span> Deals</li>
</ul>
</div>
</div>
</div>
SIDEBAR CSS
#page-wrapper {
position: relative;
width: 100%;
height: 100%;
left: 0;
}
#page-viewport {
position: relative;
width: 100%;
height: 100%;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#sidebar {
position: relative;
width: 100%;
height: 100%;
left: 0px;
border-right: 1px solid #f0f0f0;
background-color: #f9f9f9;
padding-left: 15px;
list-style: none;
}
#sidebar h3 {
display:inline;
position:relative;
top:5px;
left:5px;
}
#sidebar a:hover {
text-decoration:none;
}
#sidebar-header {
height: 40px;
border-bottom:1px solid #f0f0f0;
}
.sidebar li {
position: absolute;
line-height: 20px;
width: 100%;
padding: 10px 0 10px 20px;
}
#page-wrapper.show-sidebar #page-viewport {
-webkit-transform: translateX(200px);
}
#page-wrapper.show-sidebar #sidebar-page-content {
width: -webkit-calc(100% - 250px);
}
You can see from the image below that the list items "Products" and "Deals" follows their previous items instead of occupying separate line.
I want each item to occupy separate line.

Answer 1

The default .nav class of bootstrap is display: flex; flex: wrap;.
Just add the flex-column class tou your nav and you should be fine.
Docs: https://getbootstrap.com/docs/4.0/components/navs/#vertical