1

I want to make my Bootstrap 3 columns to be:

  • of the same height (edit: equal to the highest column, which could change)
  • have visible gutters separating them
  • have a background color that matches their equal height

So far I was able to either make them of equal height (with no visible gutter) or give them a gutter and a background. I've been fiddling with this for the past 2 hours to no avail. Naturally, I've read through everything I could find but couldn't solve this riddle. Would highly appreciate your help!

Here is code and codepen with my problem.

HTML

<div class="container">
  <div class="flex-row row">
    <div class="col-sm-5">
      <div class="inner">
        <p>Some text and probably an image over here. Not as much as on the other side, but still..</p>
      </div>
    </div>
    <div class="col-sm-7">
      <div class="inner">
        <p>More content on this side. How can I make the two columns have the same height and have a gutter in between?</p>
        <img src="...">
      </div>
    </div>
  </div>
</div>

CSS

div[class^='col-sm-'],
div[class*=' col-sm-'] {
  background-color: green;
}

@media only screen and (min-width : 768px) {
   .flex-row.row {
     display: flex;
     flex-wrap: wrap;
   }
   .flex-row.row > [class*='col-'] {
     display: flex;
     flex-direction: column;
   }
  .flex-row.row:after, 
  .flex-row.row:before {
     display: flex;
  }
}

http://codepen.io/anon/pen/QEozAj

I don't want columns to be of fixed height because contents will change. And ideally I would like to have as little extra divs as possible. :)

Edit: Column heights now look okay, thanks to a helpful reply. Still need the visible gutter.

Denitsa
  • 141
  • 9
  • Do you want a fixed height or should the a height be equal to the highest column? Also how do you want this to behave in smaller screens? – Aziz Aug 17 '16 at 22:57
  • Equal to the highest column, yes! On smaller screens, I want them all to just stack vertically. – Denitsa Aug 17 '16 at 22:59
  • Check this answer http://stackoverflow.com/a/34381153/877671 your question is probably a duplicate. – Aziz Aug 17 '16 at 23:06
  • Thanks @Aziz! I've fixed the heights with this. But I still don't get how to make the gutters between the columns. I've updated my codepen according to the answer you posted. Could you maybe look at it? – Denitsa Aug 17 '16 at 23:28

0 Answers0