4

I have two boxes next to each other, Box1 (left) has a little text and Box2 (right) has alot of text:

enter image description here

How can I make Box 1 extend to be the same height as Box 2 by padding more white space onto box 1? I'm trying to make it so both boxes are the same height; my code looks like this:

<div class="container-fluid">
  <div class="row">
    
    <div class="col-md-4">
      <div class="card mb-4 box-shadow">
        <!-- BOX1 -->
        <div class="card-body">
          box 1 data here   
        </div> 
       </div>
      </div> <!-- /col -->
    

    <div class="col-md-8">
      <div class="card mb-4 box-shadow">
        <!-- BOX2 -->
        <div class="card-body">
          box 2 data here   
          box 2 data here 
          box 2 data here 
        </div> 
       </div>
      </div> <!-- /col -->
    
  </div> <!-- /row -->
</div>

Improve this question
0

2 Answers 2

Reset to default
12 

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="row">

    <div class="col-6">
      <div class="card mb-4 box-shadow h-100">
        <div class="card-body">
          <p>box 1 data here  </p> 
        </div> 
      </div>
    </div> 

    <div class="col-6">
      <div class="card mb-4 box-shadow h-100">
        <div class="card-body">
          <p>box 1 data here  </p> 
          <p>box 2 data here  </p> 
          <p>box 2 data here  </p> 
        </div> 
      </div>
    </div>

  </div>

</div>

Improve this answer
2
  • 2
    Thank you! style=height:100% is perfect
    – Martin
    Commented Apr 2, 2020 at 7:21
  • 5
    You can use h-100 bootstrap class for height 100%. You don't need to add inline css for that.
    – HDP
    Commented Apr 2, 2020 at 8:35
0 

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="row">

    <div class="col-md-4" style="display:flex">
      <div class="card mb-4 box-shadow" style="width:100%">
        <!-- BOX1 -->
        <div class="card-body">
          box 1 data here
        </div>
      </div>
    </div>
    <!-- /col -->


    <div class="col-md-8">
      <div class="card mb-4 box-shadow">
        <!-- BOX2 -->
        <div class="card-body">
          <p>box 2 data here</p>
          <p>box 2 data here </p>
          <p>box 2 data here </p>
        </div>
      </div>
    </div>
    <!-- /col -->

  </div>
  <!-- /row -->
</div>

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.