How to css sticky-left bootstrap 4 - html

Question

I have a dashboard with a side-menu that I want to be fixed to the left. I tried doing a fixed position in css, but then all the divs get distorted and moved out of place. I then tried using bootstrap sticky-left, and it simply didn't work. I want for the left menu to stay fixed while the charts being scrollable.
CODE:
<div class="row head">
<div class="col-sm-2 sticky-left" id="side-bar">
<div id="side-nav">
<!--GREETING-->
<div class="row greeting">
<div class="col-sm-3" style="font-size: 2.6rem;">
<i class="far fa-user"></i>
</div>
<div class="col-sm-9">
<p>Hi Olivia!<br>School of UFeis</p>
</div>
</div>
<!--LABEL-->
<div class="row label">
<div class="col-sm-12">
<p>Menu</p>
</div>
</div>
<ul id="side-menu">
<button>
<div class="row">
<div class="col-sm-1">
<i class="fas fa-desktop"></i>
</div>
<div class="col-sm-8">
Dashboard
</div>
</div>
</button>
<!---CHARTS BY YEAR--->
<li class="parent">
<button>
<div class="row">
<div class="col-sm-1">
<i class="far fa-calendar-alt" style="margin-right: .8rem;"></i>
</div>
<div class="col-sm-8">
Year
</div>
<div class="col-sm-1">
<i class="fas fa-chevron-down"></i>
</div>
</div>
</button>
<ul class="sub-nav">
<li><button id=1>2019</button></li>
<li><button id=2>2018</button></li>
<li><button id=3>2017</button></li>
</ul>
</li>
<!-- CHARTS BY TEACHER -->
<li class="parent">
<button>
<div class="row">
<div class="col-sm-1">
<i class="fas fa-chalkboard-teacher"></i>
</div>
<div class="col-sm-8">
Teacher
</div>
<div class="col-sm-1">
<i class="fas fa-chevron-down"></i>
</div>
</div>
</button>
<ul class="sub-nav">
<li><button id=12>Ms. Lee</button></li>
<li><button id=13>Mr. Rogers</button></li>
<li><button id=6>Mr. Yang</button></li>
<li><button id=7>Ms. Mary</button></li>
</ul>
</li>
</ul>
</div>
</div>
<!---CHARTS-->
<div class="col-sm-10 chart_container">
<div class="row rankings">
<div class="col-sm-12">
<div class="row _chart">
<div id="lvl_chart">Please enter at least 3 markcards to see this chart.
</div>
</div>
</div>
</div>
<!--RECALLED CHART-->
<div class="row recalled">
<div class="col-sm-11 container-fluid topChart">
<div class="row _chart" >
<div id="bar_chart">Students need to enter at least 3 markcards to see this chart.</div>
</div>
</div>
</div>
<!--AGE CHART-->
<div class="row">
<div class="col-sm-11 bottomCharts">
<div class="row">
<div class="col-sm-6 age_chart">
<div class="row _chart">
<div id="pie_chart" style="">Students need to enter at least 3 markcards to see this chart.</div>
</div>
</div>
<!--GENDER CHART-->
<div class="col-sm-6 gender_chart">
<div class="row _chart">
<div id="donut_chart" >
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

I hope you are looking for sticky-top sidebar.
.chart_container {
height: 500vh
}
ul {
list-style: none;
padding: 0
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row head">
<div class="col-sm-3 " id="side-bar">
<div id="side-nav" class="sticky-top text-center">
<!--GREETING-->
<div class="row greeting">
<div class="col-sm-3" style="font-size: 2.6rem;">
<i class="far fa-user"></i>
</div>
<div class="col-sm-9">
<p>Hi Olivia!<br>School of UFeis</p>
</div>
</div>
<!--LABEL-->
<div class="row label">
<div class="col-sm-12">
<p>Menu</p>
</div>
</div>
<ul id="side-menu">
<button>
<div class="row">
<div class="col-sm-1">
<i class="fas fa-desktop"></i>
</div>
<div class="col-sm-8">
Dashboard
</div>
</div>
</button>
<!---CHARTS BY YEAR--->
<li class="parent">
<button>
<div class="row">
<div class="col-sm-1">
<i class="far fa-calendar-alt" style="margin-right: .8rem;"></i>
</div>
<div class="col-sm-8">
Year
</div>
<div class="col-sm-1">
<i class="fas fa-chevron-down"></i>
</div>
</div>
</button>
<ul class="sub-nav">
<li><button id=1>2019</button></li>
<li><button id=2>2018</button></li>
<li><button id=3>2017</button></li>
</ul>
</li>
<!-- CHARTS BY TEACHER -->
<li class="parent">
<button>
<div class="row">
<div class="col-sm-1">
<i class="fas fa-chalkboard-teacher"></i>
</div>
<div class="col-sm-8">
Teacher
</div>
<div class="col-sm-1">
<i class="fas fa-chevron-down"></i>
</div>
</div>
</button>
<ul class="sub-nav">
<li><button id=12>Ms. Lee</button></li>
<li><button id=13>Mr. Rogers</button></li>
<li><button id=6>Mr. Yang</button></li>
<li><button id=7>Ms. Mary</button></li>
</ul>
</li>
</ul>
</div>
</div>
<!---CHARTS-->
<div class="col-sm-9 chart_container">
<div class="row rankings">
<div class="col-sm-12">
<div class="row _chart">
<div id="lvl_chart">Please enter at least 3 markcards to see this chart.
</div>
</div>
</div>
</div>
<!--RECALLED CHART-->
<div class="row recalled">
<div class="col-sm-11 container-fluid topChart">
<div class="row _chart">
<div id="bar_chart">Students need to enter at least 3 markcards to see this chart.</div>
</div>
</div>
</div>
<!--AGE CHART-->
<div class="row">
<div class="col-sm-11 bottomCharts">
<div class="row">
<div class="col-sm-6 age_chart">
<div class="row _chart">
<div id="pie_chart" style="">Students need to enter at least 3 markcards to see this chart.</div>
</div>
</div>
<!--GENDER CHART-->
<div class="col-sm-6 gender_chart">
<div class="row _chart">
<div id="donut_chart">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>