Bootstrap v4 Primary Card with Header / Footer

This is an unfinished bootstrap view of v4 with header and footer in an primary card

HTML

<script src="https://code.jquery.com/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<div class="container">
  <div class="refinement-bar-row">
    <div class="row refinement-bar title-bar">
      <div class="col-12 for-you">
        <p class="toggle-refine-bar">
          click me to toggle
        </p>
        text
      </div>
    </div>
    <div class="refinement-bar filters-bar">
      <div class="row">
        <div class="col-12">

          test
        </div>
        <div class="col-12">

          test
        </div>
      </div>
    </div>
  </div>
</div>

SCSS

.filters-bar {
   height: 0;
   display: flex;
   margin-top: 2rem;
   transition: all 0.5s;
 }
 
 .open {
   .filters-bar {
     height: auto;
     display: flex;
   }
 }

JavaScript

$(".title-bar").click(function() {
  console.log("clicked");
  $('.refinement-bar-row').toggleClass("open");
});