0

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.

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?

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.

Also, is it good practice for me to be modifying the css of bootstrap classes? Couldn't this possibly break the entire framework?

TLDR: What is the best method for declaring div heights in bootstrap?

As an example, how would I get both of the 'hello there' divs to occupy the same height in the same row?

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Coffeedev Data Dashboard</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <style> body { padding-top: 70px;} .col-md-9{height: 100%}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.js"></script>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
 </head>

 <body>
     <!-- Fixed navbar -->
     <nav class="navbar navbar-default navbar-fixed-top">
       <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">CoffeeDev Dashboard</a>
      </div>
         <div id="navbar" class="navbar-collapse collapse">
           <ul class="nav navbar-nav">
             <li class="active"><a href="#">Home</a></li>
             <li><a href="#plot">Plot</a></li>
           </ul>
         </div>
       </div>
     </nav>

     <!-- Main Container -->
     <div class="container-fluid ">
      <div class="row">
       <div class="col-md-3">
         <div class="alert alert-success" role="alert">
          <h3> Hello there!</h3>
          <br>
          <br>
          <br>
          <br>
         </div>

       </div>
       <div class="col-md-9">
         <div class="alert alert-success" role="alert">
          <h3> Hello there!</h3>
         </div>
       </div>

      </div>
      <div class="row">
       <div class="col-md-12">
        Hi there!
       </div>
      </div>

     </div>

 </body>

</html>

Edit: Attempting with .row-eq-height. Still no luck.

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Coffeedev Data Dashboard</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <style> body { padding-top: 70px;}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.js"></script>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
 </head>

 <body>
     <!-- Fixed navbar -->
     <nav class="navbar navbar-default navbar-fixed-top">
       <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">CoffeeDev Dashboard</a>
      </div>
         <div id="navbar" class="navbar-collapse collapse">
           <ul class="nav navbar-nav">
             <li class="active"><a href="#">Home</a></li>
             <li><a href="#plot">Plot</a></li>
           </ul>
         </div>
       </div>
     </nav>

     <!-- Main Container -->
     <div class="container-fluid ">
      <div class="row row-eq-height">
       <div class="col-md-3" style="background-color: red">
     Hello!
     <br>
     <br>
     <br>
       </div>
       <div class="col-md-9" style="background-color: red">
        Hello!
       </div>
      </div>
     </div>

 </body>

</html>
Izzo
  • 4,461
  • 13
  • 45
  • 82
  • 6
    There are numerous answers all ready available on SO plus this [Bootstrap Equal-Height Columns Experiment](http://getbootstrap.com.vn/examples/equal-height-columns/). Also see http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height – vanburen Jun 11 '16 at 00:21
  • You shouldn't modify the css of bootstrap classes. You should create your own css file and override the properties of the classes in there – Cave Johnson Jun 11 '16 at 00:52

1 Answers1

0

if you just wand to control the height you can specify the height in your own css like;

#myCustomDivId{
    height: 10em;
}

em will be scale to the screen size. just playing about with the number until it looks the way you want.

johara
  • 111
  • 7