0

I'm having this layout using Bootstrap 3:

<div class="row">
  <div class="col-lg-4 col-md-4 col-sm-6">
    <div class="img-col"> 
      <div class="content">
        <p>Some text here!</p>
      </div>
    </div>
  </div>
  <div class="col-lg-4 col-md-4 col-sm-6">
     <div class="img-col"> 
      <div class="content">
        <p>
           Some text here!<br>
           Some text here!<br>
           Some text here!<br>
           Some text here!
        </p>
      </div>
    </div>
  </div>
</div>

and

.p { min-height: 350px; }

what I'm trying to do is, that both p tags are having the same height, depending on which p has more text in it but remain at 350px if its less text than 350px. Is this somehow doable in CSS only?

I found this question click, and tried to use table-cell (second answer). But it didnt work. Any solution?

Note: I didn't put the .container there because there are many rows.

Note 2: I want the p tags to be the same height, not the row!

Community
  • 1
  • 1
supersize
  • 13,764
  • 18
  • 74
  • 133
  • 3
    `class="col-lg-4 col-md-4 col-sm-6"` is the same as simply `class="col-md-4 col-sm-6"` – cvrebert Jan 30 '15 at 16:19
  • possible duplicate of [How can I make Bootstrap columns all the same height?](http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height) – isherwood Jan 30 '15 at 16:22
  • 1
    I would try the negative margin solution since table-cell won't work well with Bootstrap's negative margins - http://bootply.com/dSq5U7TMXl – Carol Skelly Jan 30 '15 at 16:27
  • @Skelly thing is, I want to have the `p` tag the same height. Not the row. – supersize Jan 30 '15 at 16:37
  • 1
    The problem with trying to have the P the same height is that they are independent of each other so there is no way to know how tall the other one is (unless you decide to use JS) which is why the customization for the height would have to be applied to the columns (which is possible with pure CSS but doesn't sound like what you want) – crazymatt Jan 30 '15 at 17:34
  • @crazymatt what would be a JS/jQuery solution for this. Bear in mind that I have many rows, but I only want the p-tags have the same height related to each row. – supersize Jan 31 '15 at 22:11
  • This question and answer should lead you on the right path http://stackoverflow.com/questions/6781031/use-jquery-css-to-find-the-tallest-of-all-elements – crazymatt Feb 01 '15 at 03:49

0 Answers0