title: How do you force a column div to be the same height of its row?
body: <p>I'm in the process of learning bootstrap and am struggling very hard. I know that the default row height in bootstrap is whatever height will be able to contain a child element (i.e. a column). However, the default height of a column is to take up the minimum amount of space.</p>
  
  <p>So my question: How do I force the height of a column to take up the height of the row? Let's say I have two columns in a row. The height of one column is greater than the other due to the contents of a column being more. How do I force the sibling column to be the same height?</p>
  
  <p>I feel like I've tried everything and am having no luck. I've tried using the flex properties, the table properties, but nothing is working.</p>
  
  <p>Also, is it good practice for me to be modifying the css of bootstrap classes? Couldn't this possibly break the entire framework?</p>
  
  <p>TLDR: What is the best method for declaring div heights in bootstrap?</p>
  
  <p>As an example, how would I get both of the 'hello there' divs to occupy the same height in the same row?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
   &lt;head&gt;
    &lt;title&gt;Coffeedev Data Dashboard&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"&gt;
    &lt;style&gt; body { padding-top: 70px;} .col-md-9{height: 100%}
    &lt;/style&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdn.plot.ly/plotly-latest.min.js"&gt;&lt;/script&gt;
   &lt;/head&gt;
  
   &lt;body&gt;
       &lt;!-- Fixed navbar --&gt;
       &lt;nav class="navbar navbar-default navbar-fixed-top"&gt;
         &lt;div class="container-fluid"&gt;
        &lt;div class="navbar-header"&gt;
          &lt;a class="navbar-brand" href="#"&gt;CoffeeDev Dashboard&lt;/a&gt;
        &lt;/div&gt;
           &lt;div id="navbar" class="navbar-collapse collapse"&gt;
             &lt;ul class="nav navbar-nav"&gt;
               &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="#plot"&gt;Plot&lt;/a&gt;&lt;/li&gt;
             &lt;/ul&gt;
           &lt;/div&gt;
         &lt;/div&gt;
       &lt;/nav&gt;
  
       &lt;!-- Main Container --&gt;
       &lt;div class="container-fluid "&gt;
        &lt;div class="row"&gt;
         &lt;div class="col-md-3"&gt;
           &lt;div class="alert alert-success" role="alert"&gt;
            &lt;h3&gt; Hello there!&lt;/h3&gt;
            &lt;br&gt;
            &lt;br&gt;
            &lt;br&gt;
            &lt;br&gt;
           &lt;/div&gt;
  
         &lt;/div&gt;
         &lt;div class="col-md-9"&gt;
           &lt;div class="alert alert-success" role="alert"&gt;
            &lt;h3&gt; Hello there!&lt;/h3&gt;
           &lt;/div&gt;
         &lt;/div&gt;
  
        &lt;/div&gt;
        &lt;div class="row"&gt;
         &lt;div class="col-md-12"&gt;
          Hi there!
         &lt;/div&gt;
        &lt;/div&gt;
  
       &lt;/div&gt;
  
   &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Edit: Attempting with .row-eq-height. Still no luck.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
   &lt;head&gt;
    &lt;title&gt;Coffeedev Data Dashboard&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"&gt;
    &lt;style&gt; body { padding-top: 70px;}
    &lt;/style&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdn.plot.ly/plotly-latest.min.js"&gt;&lt;/script&gt;
   &lt;/head&gt;
  
   &lt;body&gt;
       &lt;!-- Fixed navbar --&gt;
       &lt;nav class="navbar navbar-default navbar-fixed-top"&gt;
         &lt;div class="container-fluid"&gt;
        &lt;div class="navbar-header"&gt;
          &lt;a class="navbar-brand" href="#"&gt;CoffeeDev Dashboard&lt;/a&gt;
        &lt;/div&gt;
           &lt;div id="navbar" class="navbar-collapse collapse"&gt;
             &lt;ul class="nav navbar-nav"&gt;
               &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
               &lt;li&gt;&lt;a href="#plot"&gt;Plot&lt;/a&gt;&lt;/li&gt;
             &lt;/ul&gt;
           &lt;/div&gt;
         &lt;/div&gt;
       &lt;/nav&gt;
  
       &lt;!-- Main Container --&gt;
       &lt;div class="container-fluid "&gt;
        &lt;div class="row row-eq-height"&gt;
         &lt;div class="col-md-3" style="background-color: red"&gt;
       Hello!
       &lt;br&gt;
       &lt;br&gt;
       &lt;br&gt;
         &lt;/div&gt;
         &lt;div class="col-md-9" style="background-color: red"&gt;
          Hello!
         &lt;/div&gt;
        &lt;/div&gt;
       &lt;/div&gt;
  
   &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>