htmlcssflexboxangular-bootstrap

Vertically aligning items in a col > row using Flex

I am quite new to Flex and was wondering if there was a way for me aligning certain items within a col -> row. I was thinking thinking of keeping it flex (ideally without using floats) because it would make the reponsiveness a lot easier for me, but im open to changes in both the HTML and CSS.

I have this vertically aligned card I made via bootstrap:

enter image description here

I would like for the metrics and labels to be at the bottom and the rest to stay at the top.

.performance-type {
  font-size: 18px;
}

.performance-number {
  font-size: 18px;
  font-weight: bold;
}
<div class="card mt-4">
  <div class="row p-3">
    <div class="col-md-4">
      <img src="https://voiceboxglobaldebug.s3.eu-west-2.amazonaws.com/Kuga_PHEV_ENQUIRY_DAY_1..jpg" class="img-thumbnail" style="max-width: 100%;" alt="">
    </div>
    <div class="col-md-8">
      <div class="row">
        <div class="col-md-6">
          <h2 class="title-sub-section font-weight-bold mt-3">March 12, 2022 10:40pm</h2>
        </div>
        <div class="col-md-6 text-right mt-3">
          <i class="fab fa-facebook mr-1 facebook-icon"></i>
          <span class="pr-2 font-weight-bold">Some Facebook Page</span>
        </div>
      </div>
      <p>Post description goes here...</p>
      <div class="row p-0">
        <hr class="mt-2 mb-2">
        <div class="col-md-2">
          <span class="performance-type">Post Clicks</span>
          <div>
            <span class="mr-2 performance-number">21</span>
          </div>
        </div>
        <div class="col-md-2">
          <span class="performance-type">Reactions</span>
          <div>
            <span class="mr-2 performance-number">21</span>
          </div>
        </div>
        <div class="col-md-2">
          <span class="performance-type">Impressions</span>
          <div>
            <span class="mr-2 performance-number">21</span>
          </div>
        </div>
        <div class="col-md-2">
          <span class="performance-type">Reach</span>
          <div>
            <span class="mr-2 performance-number">21</span>
          </div>
        </div>
        <div class="col-md-2">
          <span class="performance-type">Eng. Rate</span>
          <div>
            <span class="mr-2 performance-number">21</span>
          </div>
        </div>
        <div class="col-md-2">
          <span class="performance-type">Spend</span>
          <div>
            <span class="mr-2 performance-number">--</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Everything else is bootstrap.

End Result should look something like this:

endresult

Solution

  • Just make these two change it will work.

    1. <div class="col-md-8 d-flex flex-column"
    2. <div class="row p-0 mt-auto">