CODEWITHSUNDEEP
htmlcssbootstrap-4
daggett
daggett

Reputation: 277

How to have a div fill the whole height of its parent column in Bootstrap

I'm looking to have the div with the red border to be the same height as its green counterpart on the right? This is in bootstrap 4!

Have tried display: flex and flex-grow, have also tried putting the border on the column (which makes the effect I'm looking for) but it then doesn't have the padding.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" >
<div class="container-fluid">
  <div class="row">
    <div class="col-12 col-lg-6 order-lg-1">
      <div class="border border-lg border-success p-3 p-md-4 p-lg-5 text-xlarge font-weight-medium">This is an example sentence. It may go on for a couple of lines just to see what's going to happen!</div>
    </div>
    <div class="col-12 col-lg-6 order-lg-3">
      <div class="text-xlarge text-success mt-2"><i class="icon icon-md line-height-1">check</i> Correct</div>
      <p class="mb-3 mb-lg-0 text-large">Write a short explanation here</p>
    </div>
    <div class="col-12 col-lg-6 order-lg-2">
      <div class="border border-lg border-danger p-3 p-md-4 p-lg-5 text-xlarge font-weight-medium">This is an example sentence.</div>
    </div>
    <div class="col-12 col-lg-6 order-lg-4">
      <div class="text-xlarge text-danger mt-2"><i class="icon icon-md line-height-1">close</i> Incorrect</div>
      <p class="mb-3 mb-lg-0 text-large">Write a short explanation here</p>
    </div>
  </div>
</div>

Here's a pen with the existing: https://codepen.io/Daggett/pen/OKJxPm

The columns are also responsive and need to stack at smaller breakpoints (hence the order-lg classes)

Upvotes: 4

Views: 24525

Answers (2)

Florian de Ville
Florian de Ville

Reputation: 83

Bootstrap 4 rows and col-elements already have an equal height through their flex design. You only have to set the height of your inner div to 100%, to make it fill its parent space. You can use the Bootstrap 4 h-100 class for height:100%;.

<div class="container-fluid">
  <div class="row">
    <div class="col-12 col-lg-6 order-lg-1">
      <div class="border border-lg border-success p-3 p-md-4 p-lg-5 text-xlarge font-weight-medium">This is an example sentence. <br> It may go on for a couple of lines just to see what's going to happen!</div>
    </div>
<div class="col-12 col-lg-6 order-lg-3">
  <div class="text-xlarge text-success mt-2"><i class="icon icon-md line-height-1">check</i> Correct</div>
    <p class="mb-3 mb-lg-0 text-large">Write a short explanation here</p>
</div>
<div class="col-12 col-lg-6 order-lg-2">
  <div class="h-100 border border-lg border-danger p-3 p-md-4 p-lg-5 text-xlarge font-weight-medium">This is an example sentence.</div>
</div>
<div class="col-12 col-lg-6 order-lg-4">
  <div class="text-xlarge text-danger mt-2"><i class="icon icon-md line-height-1">close</i> Incorrect</div>
    <p class="mb-3 mb-lg-0 text-large">Write a short explanation here</p>
  </div>
</div>

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 272817

add d-flex to the column to use the default stretch behavior and have the same height. Also add w-100 to the element to keep it's default full width:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" >
<div class="container-fluid">
  <div class="row">
    <div class="col-12 col-lg-6 order-lg-1 d-flex">
      <div class="border border-lg border-success p-3 p-md-4 p-lg-5 text-xlarge font-weight-medium w-100">This is an example sentence. It may go on for a couple of lines just to see what's going to happen!</div>
    </div>
    <div class="col-12 col-lg-6 order-lg-3">
      <div class="text-xlarge text-success mt-2"><i class="icon icon-md line-height-1">check</i> Correct</div>
      <p class="mb-3 mb-lg-0 text-large">Write a short explanation here</p>
    </div>
    <div class="col-12 col-lg-6 order-lg-2 d-flex">
      <div class="border border-lg border-danger p-3 p-md-4 p-lg-5 text-xlarge font-weight-medium w-100">This is an example sentence.</div>
    </div>
    <div class="col-12 col-lg-6 order-lg-4">
      <div class="text-xlarge text-danger mt-2"><i class="icon icon-md line-height-1">close</i> Incorrect</div>
      <p class="mb-3 mb-lg-0 text-large">Write a short explanation here</p>
    </div>
  </div>
</div>

Upvotes: 8

Related Questions