Bootstrap 4 Aplha6 with Sticky Kit

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdn.rawgit.com/leafo/sticky-kit/master/dist/sticky-kit.min.js"></script>
<div class="container">
  <div class="row main-wrapper">

    <!-- // PRIMARY CONTENT -->
    <div class="col-8">
      <div id="scrolled">
   aaa<br/>aaa<br/>aaa<br/>aaa<br/>aaa<br/>aaa<br/>aaa<br/>aaa<br/>aaa<br/>aaa<br/>aaa<br/>aaa<br/>aaa<br/>aaa<br/>aaa<br/>aaa<br/>aaa<br/>aaa<br/>aaa<br/>aaa<br/>aaa<br/>aaa<br/>aaa<br/>aaa<br/>aaa<br/>aaa<br/>aaa<br/>aaa<br/>aaa<br/>aaa<br/>aaa<br/>aaa<br/>aaa<br/>aaa<br/>aaa<br/>aaa<br/>aaa<br/>aaa<br/>aaa<br/>aaa<br/>aaa<br/>aaa<br/>aaa<br/>aaa<br/>aaa<br/>aaa<br/>aaa<br/>aaa<br/>aaa<br/>aaa<br/>aaa<br/>aaa<br/>aaa<br/>aaa<br/>
      </div>
    </div>
    <!-- // SIDEBAR -->
    <div class="col-4">
      <div id="pinned">
        <!-- PINNED ELEMENT -->
        sidebar
        <span class="btm">sidebot</span>
      </div>
    </div>
  </div>
</div>

CSS

#pinned {
  background: yellow;
  min-height: 490px;
  margin-bottom: 20px
}

#scrolled {
  background: green
}

.btm {
  position: absolute;
  bottom: 0;
  display: block;
}

JavaScript

// JQUERY STICKY KIT
 // http://leafo.net/sticky-kit/
 $("#pinned").stick_in_parent({
   parent: '.main-wrapper'
 });