How to make a div the same size as the div above in a Boostrap grid column?

Question

this is my first question here, be gentle, I just started learning those things :)

I'm working on building a practice page using only HTML, Sass and bootstrap-grid.css (so basically using only rows and columns, card classes are not included in the file, I styled them separately) and I encountered a probably very simple problem that keeps me awake at night.

I need to make all .card-text divs (the white background ones) the same witdh "visually" as the img above them, but simply resizing the .card-text divs or making them absolutely positioned doesn't seem as the right solution due do creating another problems, and I want to keep the .col- because of easy RWD outcomes. The .card-text and .card-img divs inherit the given width of the .col-, the images in have to keep the right proportion and because of the grey background of .card-img is the same as the whole section's background the problem lies only in .card-text (at least visually).

The column structure in a .row looks like this:

      <div class="col-md-4">
        <div class="card">
          <div class="card-img">
            <img src="images/r1i1.jpg" alt="image">
          </div>
          <div class="card-text">
            <h6>Ebony & Ivory</h6>
            <h5>Branding</h5>
          </div>
        </div>
      </div>

And so on (six columns) and the sccs for this section looks like this:

    .portfolio {
  background-color: $color-background;
  .card {
    background-color: $color-background;
    padding: 20px;
    .card-img {
      height: 300px;
      margin: 0 44px;
      overflow: hidden;
      img {
      vertical-align: bottom;
      height: 100%;
      }
    }
    .card-text {
      background-color: $color-body;
      padding-top: 29px;
      padding-bottom: 27px;
    }
    h5 {
      margin: 2px 0 0 0;
      font-weight: lighter;
      font-family: $font-decor;
      color: #737373;
      font-size: 14px;
    }
    h6 {
      font-family: $font-text;
      font-weight: bold;
      font-size: 18px;
      margin: 0;
      color: #333333;
    }
  }
  .col {
    padding-top: 45px;
  }
}

Screenshots with inspection of the divs:

.card

.card-text

EDIT:

The scss styles that finally worked:

    .portfolio {
  background-color: $color-background;
  .card {
    background-color: $color-background;
    margin: 0 44px 50px 44px;
    .card-img {
      overflow: hidden;
      img {
      vertical-align: bottom;
      width: 100%;
      }
    }
    .card-text {
      background-color: $color-body;
      padding-top: 29px;
      padding-bottom: 27px;
      h5 {
        margin: 2px 0 0 0;
        font-weight: lighter;
        font-family: $font-decor;
        color: #737373;
        font-size: 14px;
      }
      h6 {
        font-family: $font-text;
        font-weight: bold;
        font-size: 18px;
        margin: 0;
        color: #333333;
      }
    }  
  }
  .col {
    padding-top: 45px;
  }
}

So the problem was, of course, that I made a deadly sin by setting constant height to .card-img.

Answer 1

Just add the same margin: 0 44px that you have added for the .card-img to your .card-text element and then add width: 100% to both the elements so that they occupy the full width of their parent div and you should get the equal width for both elements as you wanted.

Check and run the following Code Snippet for a practical example of the above approach:

html, body {margin: 0px; padding: 0; width: 100%; height: 100%;}
.portfolio {
  background-color: #222;
}
.portfolio .card {
  background-color: #222;
  padding: 20px;
}
.portfolio .card .card-img {
  height: 300px;
  margin: 0 44px;
  overflow: hidden;
}
.portfolio .card .card-img img {
  vertical-align: bottom;
  height: 100%;
  width: 100%;
}
.portfolio .card .card-text {
  background-color: #333;
  padding-top: 29px;
  padding-bottom: 27px;
  width: 100%;
  margin: 0 44px;
}
.portfolio .card h5 {
  margin: 2px 0 0 0;
  font-weight: lighter;
  color: #737373;
  font-size: 14px;
}
.portfolio .card h6 {
  font-weight: bold;
  font-size: 18px;
  margin: 0;
  color: #333333;
}
.portfolio .col {
  padding-top: 45px;
}

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" /><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>

<section class="portfolio">
  <div class="col-md-4">
    <div class="card">
      <div class="card-img">
        <img src="https://picsum.photos/240/360" alt="image">
      </div>
      <div class="card-text">
        <h6>Ebony & Ivory</h6>
        <h5>Branding</h5>
      </div>
    </div>
  </div>
</section>

Answer 2

Add certain width to card-img and then move .card-text div inside card-img and change the css styles for card-img.

I have modified your code and added it to the snippet.

Have a look once.

.card {
  background-color: #fff;
  padding: 20px;
}


 .card-img {
    width: 150px;
    margin: 0 44px;
    overflow: hidden;
  }

img {
      width: 100%;
  }

.card-text {
    position: relative;
    text-align:center;
    top: -4px;
    background-color: aliceblue;
    padding-top: 29px;
    padding-bottom: 27px;
  }

 h5 {
    margin: 2px 0 0 0;
    font-weight: lighter;
    color: #737373;
    font-size: 14px;
  }
h6 {
    font-weight: bold;
    font-size: 18px;
    margin: 0;
    color: #333333;
  }
.col {
  padding-top: 45px;
}

<div class="col-md-4">
  <div class="card">
    <div class="card-img">
      <img src="https://p1.pxfuel.com/preview/844/972/952/suit-model-businessman-corporate-royalty-free-thumbnail.jpg" alt="image">
      <div class="card-text">
        <h6>Ebony & Ivory</h6>
        <h5>Branding</h5>
      </div>
    </div>
    
  </div>
</div>

Image Source: Google

Hope this helps!!

Answer 3

• Set your img width to 100% rather than height.
• Remove padding from .card
• Remove margin from .card-img

Hope that works:)