bootstrap grid system and fixed sidebar

I am trying to create bootstrap grid page with two main sections. one is the app content and the other one is side nav bar. the nav bar is much shorter the the app content itself. what i am trying to accomplish is that whenever i scroll the page, the app side nav bat will always stick to the top of the page (top, not bottom of it)

my code:

<div class="row">
  <div class="col-sm-10 col-md-10">

    <div class="col-sm-8 col-md-8">
      <app-content></app-content>
    </div>

    <div class="col-sm-4 col-md-4">
      <app-side-navbar></app-side-navbar>
    </div>

  </div>
</div>

whenever i scroll the page, i want to always see on the top right corner the app navbar.

thanks!

this is what solved the issue for me:

<div class="row">

  <div class="app-wrapper">
    <div class="col-sm-10 col-md-10">
      <div class="col-sm-8 col-md-8">
        <app-content></app-content>
      </div>

      <div class="sticky">
        <div class="col-sm-4 col-md-4">
          <app-side-navbar></app-side-navbar>
        </div>
      </div>
    </div>

  </div>
</div>

and the css:

.sticky {
  position: sticky;
  top:0;
  z-index: 999;
}