CODEWITHSUNDEEP
htmlcssbootstrap-4
Jonathan
Jonathan

Reputation: 451

set a divs height to another elements height

I have two cards One holding an image an another holding some text. The issue is when I resize the window to test for responsiveness, There is a lot of card space under the image. Is there a way to set card{ height : img height + 10px } using CSS?

<div class="container">
  <div class="row">
    <div class="col-6 card">
      <div class="card-body">
        <img src="../assets/" class="card-img-top" alt="...">
      </div>
    </div>
    <div class="col-1">
    </div>
    <div class="col-5 card">
      <div class="card-body">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies sem sit amet ex cursus, a dignissim dolor faucibus. Donec venenatis ut sem vel ultricies. Vestibulum vitae leo sed dolor convallis tincidunt. Integer non eleifend purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam non nulla maximus, congue leo ut, eleifend lacus. Cras a.
        </p>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Views: 30

Answers (1)

Canolyb1
Canolyb1

Reputation: 724

Instead of placing card on the col class, nest the card inside the column like this:

<div class="container">
  <div class="row">
    <div class="col-6">
      <div class="card">       
      <div class="card-body">
        <img src="../assets/" class="card-img-top" alt="...">
      </div>
      </div>
    </div>
    <div class="col-1">
    </div>
    <div class="col-5">
      <div class="card">
              <div class="card-body">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies sem sit amet ex cursus, a dignissim dolor faucibus. Donec venenatis ut sem vel ultricies. Vestibulum vitae leo sed dolor convallis tincidunt. Integer non eleifend purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam non nulla maximus, congue leo ut, eleifend lacus. Cras a.
        </p>
      </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions