Columns with same height and a background color with Bootstrap

Question

Working with Bootstrap 3. I have two col (col-md-8 and col-md-4) that have the same height. (thanks to a little snippet find here :) )

This is ok, it works. But I need them to have a background-color. The problem is -- and in fact it is normal -- that the two col are side by side and so I don't have a white gutter between them.

I can try with a "inner" div in each col. but then I will need these inner div to have the same height as the parent.

Her the result : You can see the gutters filled with the background color

@media only screen and (min-width : 768px) {
  .is-table-row {
    display: table;
  }
  .is-table-row [class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: top;
  }
}
.red {
  background: red;
}
.green {
  background: green;
}

  

<div class="container">
  <div class="row is-table-row">
   <div class="col-md-8 red"> text </div>
   <div class="col-md-4 green"> text text text text text text text text    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>
  </div>
 </div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

Can you help me please ?

I've checked your code as a snippet and ... I can't see any white margins. Please check the code in your answer. — Gleb Kemarsky, Jun 25 '16 at 15:44
Now the snippet is correct. And as you can see, the two cols have the same height. My problem is that I want to have them a background color but this way there is no white space between the 2 col. So is there a way to add 15px margin left and right from each col ? — SCorman, Jun 26 '16 at 05:37

score 0 · Answer 1 · answered Jun 25 '16 at 15:58

this is how I mostly solve problems like this:

<div class="row is-table-row">
   <div class="col-md-8 red"> 
       <div class="inner">
           text
        </div> 
    </div>
   <div class="col-md-4 green"> 
       <div class="inner">
           text
        </div> 
    </div>
</div>

And the css is:

.red .inner{
   background: red;
}
.green .inner{
   background: #343335;
}
.red, .green{
    padding: 10px;
}

I don't know if that's the best solution, but it does the job

Yes but this way, the red and green div don't have the same height. — SCorman, Jun 26 '16 at 05:31

score 0 · Answer 2 · answered Jun 25 '16 at 16:16

To achieve same height on Bootstrap's columns you can try this:

.same-height {
  position: relative;
}

.same-height .red,
.same-height .green {
  position: static;
}

.same-height .red:before,
.same-height .green:before{
  position: absolute;
  content: '';
  z-index: -1;
  bottom: 0;
  top: 0;
}

.same-height .red:before {
  width: calc(66.66666667% - 30px);
  background: red;
}

.same-height .green:before {
  width: calc(33.33333333% - 30px);
  background: green;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container same-height">
  <div class="row">
     <div class="col-xs-8 red"> text text text text text text text text text text text </div>
     <div class="col-xs-4 green">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </div>
  </div>
</div>

Columns with same height and a background color with Bootstrap

2 Answers2