Bootstrap : increase height of 2 parallel divs in a row

Question

i want to increase height of 2 divs that are parellel to each other , for example left column has less content and right has more content but what i want both should have equal height as left one has a background :

<div class="container">
  <div class="row">
    <div class="col-md-4 col-sm-4 col-xs-12" style="background:red;">
      <p>Div with less content </p>
    </div>
    <div class="col-md-8 col-sm-8 col-xs-12" >
      <p>Div with more content  that  without background </p>
    </div>
  </div>
</div>

need your help with this i am using bootstrap 3.0

score 0 · Answer 1 · answered Mar 23 '16 at 12:02

0

Please try this:

<div class="container">
  <div class="row flex">
    <div class="col-md-4 col-sm-4 col-xs-12" style="background:red;">
      <p>Div with less content </p>
    </div>
    <div class="col-md-8 col-sm-8 col-xs-12" >
      <p>Div with more content  that  without background Div with more content  that  without background  Div with more content  that  without background  Div with more content  that  without background  Div with more content  that  without background Div with more content  that  without background </p>
    </div>
  </div>
</div>

CSS:

.flex{display:flex}

answered Mar 23 '16 at 12:02

satya

1,145
8
12

Note that IE is not supporting flexboxes. (http://caniuse.com/#feat=flexbox) – AlexG Mar 23 '16 at 12:14
it works but is there any way to do it like using bg image etc – Sikander Mar 23 '16 at 12:45

Bootstrap : increase height of 2 parallel divs in a row

1 Answers1