title: Forcing equal height child DIVs in a parent Bootstrap jumbotron
body: <p>I'm a newbie to Bootstrap and I'm having a problem getting two sibling columns to render to the same height under a parent DIV. Basically, I'm trying to create a "blackboard" next to the video which I'd like to render 100% with the video player but with a black background when the page loads. </p>
  
  <p>Here's the code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;HTML5 Responsive Custom Video Player&lt;/title&gt;
      &lt;link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;style type="text/css"&gt;
      .jumbotron {
          padding: 0;
          margin-bottom: 0;
      }
      .blackboard {
          background-color: #000;
          color: #fff;
          min-height: 100%;
          margin: 0 auto;
          text-align: left;
      }
  &lt;/style&gt;
  &lt;div class="row jumbotron"&gt;
      &lt;div class="player col-sm-6"&gt;
          &lt;video width="100%" poster="videos/poster.jpg" id="videoPlayer"&gt;
              &lt;source src="videos/BigBuckBunny_512kb.mp4" type="video/mp4"&gt;
              Your browser does not support the video tag.
          &lt;/video&gt;
      &lt;/div&gt;
  
      &lt;div class="blackboard col-sm-6"&gt;
          BLACKBOARD
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The "blackboard" DIV is only rendering the height of the text inside the DIV. The jumbotron's default background-color of #eee fills the rest of the DIV.</p>