Bootstrap vue cards bottom buttons to be aligned

Question

I am using bootstrap vue with vue to code a 4 by 4 card. Currently the title in one of the card is messing with one of buttons on the bottom of the card. The media width for the below is around 1000px.

Please refer to the image below

However when I change the title to a shorter Title, it is aligned. Please refer to the image below

I know it has something to do with the width but I can't seem to figured out what is causing it.

Steps that I have tried to solve the issue is using flex grow on the parent and word wrap for the title but still nothing. Hopefully someone can shed some light.

Attach is url to the sandbox of my code. https://codesandbox.io/s/vue-cards-hx5c9

I will also attach my code below. thank you. Update: I have updated my font family in my sandbox then the issue occurs

<template>
  <b-container fluid class="bv-example-row cards-row">
    <b-row cols="1" cols-sm="1" cols-md="1" cols-lg="4">
      <b-col class="desktop-col">
        <div>
          <b-card
            title="Stock & ETFs"
            img-src="https://picsum.photos/600/300/?image=25"
            img-alt="Image"
            img-bottom
            class="mb-2 h-100"
          >
            <b-card-text>
              0% commission means there’s no markup on stocks & ETFs – no matter
              how much you invest
            </b-card-text>

            <div class="cta_wrap">
              <div class="row">
                <a variant="primary" href="#">Learn More</a>
              </div>
              <div class="row mt-2">
                <b-button href="#" variant="primary">Invest in Stocks</b-button>
              </div>
            </div>
          </b-card>
        </div>
      </b-col>
      <b-col class="desktop-col">
        <div>
          <b-card
            title="Cryptocurrencies"
            img-src="https://picsum.photos/600/300/?image=25"
            img-alt="Image"
            img-bottom
            class="mb-2 h-100"
          >
            <b-card-text>
              Buy, sell and store Bitcoin and other leading cryptos with ease
            </b-card-text>

            <div class="cta_wrap">
              <div class="row">
                <a variant="primary" href="#">Learn More</a>
              </div>
              <div class="row mt-2">
                <b-button href="#" variant="primary"
                  >Buy Cryptocurrencies</b-button
                >
              </div>
            </div>
          </b-card>
        </div>
      </b-col>
      <b-col class="desktop-col">
        <div>
          <b-card
            title="CFD Trading"
            img-src="https://picsum.photos/600/300/?image=25"
            img-alt="Image"
            img-bottom
            class="mb-2 h-100"
          >
            <b-card-text>
              Go long or short on FX from just 1 pip. Trade commodities and
              indices with flexible leverage
            </b-card-text>

            <div class="cta_wrap">
              <div class="row">
                <a variant="primary" href="#">Learn More</a>
              </div>
              <div class="row mt-2">
                <b-button href="#" variant="primary">Trade Now</b-button>
              </div>
            </div>
          </b-card>
        </div>
      </b-col>
      <b-col class="desktop-col">
        <div>
          <b-card
            title="Forex"
            img-src="https://picsum.photos/600/300/?image=25"
            img-alt="Image"
            img-bottom
            class="mb-2 h-100"
          >
            <b-card-text>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim nam
              qui illum. Ipsa aliquam quas magnam est perferendis a, repellendus
              unde, nemo expedita doloremque suscipit ut dolore consequuntur
              amet vero!
            </b-card-text>

            <div class="cta_wrap">
              <div class="row">
                <a variant="primary" href="#">Learn More</a>
              </div>
              <div class="row mt-2">
                <b-button href="#" variant="primary">Buy Forex</b-button>
              </div>
            </div>
          </b-card>
        </div>
      </b-col>
    </b-row>
  </b-container>
</template>
<script>
export default {
  name: "Content",
  data() {
    return {};
  },
};
</script>
<style scoped>
.cards-row {
  position: relative;
  bottom: 50px;
}

.card-text {
  min-height: auto;
  flex-grow: 1;
}

.card-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.cta_wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
}

@media screen and (max-width: 992px) {
  .cta_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}

@media screen and (min-width: 992px) {
  .desktop-col {
    display: flex;
    justify-content: center;
  }
}
</style>

Answer 1

I think the problem is image sizing. To control that we can give a max-height: 112px styling to the card-img. But we have to give it in a size bigger than 991px. So that we could protect our image sizes when flex-direction returns to column. Here what I've added to your style;

@media screen and (min-width: 992px) {
  .card-img,
  .card-img-top,
  .card-img-bottom {
    max-height: 112px !important;
  }
}