Boostrap 4 - vertically align row to the bottom of a container

I'm having trouble aligning a row of buttons to the bottom of a container.

Referencing the screenshot below; There are 3 columns inside a row that make up each section. The row uses the class 'justify-content-center' to center the items in the middle of the page.

The height of the rows grow depending on column with the most content.

My goal is to align the buttons of the second and third column to the bottom of the column so there are inline with the first column.

I've been through Bootstrap documentation and tried many different approached just as 'align-self-send' but still no success.

Here is my markup;

        <div
      class="row justify-content-center package-sections"
    >
      <div class="col-lg-3 col-md-6 m-4 p-2 package package-1">
        <h3 class="mb-3">x</h3>
        <ul>
          <li>x</li>
          <li>x</li>
          <li>x</li>
          <li>x</li>
          <li>x</li>
          <li>x</li>
          <li>x</li>
          <li>x</li>
          <li>x</li>
          <li>x</li>
        </ul>
        <div class="row">
          <div class="col text-center learn-more">
            <button
              @click="
                setPackageProperties(x, x)
              "
              v-b-modal.packages-modal
              class="btn btn-learn-more"
            >
              Learn More...
            </button>
          </div>
          <div class="col text-center enquire-now">
            <router-link
              to="#contact"
              v-scroll-to="'#contact'"
              class="btn btn-enquire"
              >Enquire Now!</router-link
            >
          </div>
        </div>
      </div>

      <div class="col-lg-3 col-md-6 m-4 p-2 package package-2">
        <h3 class="mb-3">x</h3>
        <p class="pl-3">x</p>
        <ul>
          <li>x</li>
          <li>x</li>
          <li>x</li>
        </ul>
        <div class="row">
          <div class="col text-center learn-more">
            <button
              @click="
                setPackageProperties(x, x)
              "
              v-b-modal.packages-modal
              class="btn btn-learn-more"
            >
              Learn More...
            </button>
          </div>
          <div class="col text-center enquire-now">
            <router-link
              to="#contact"
              v-scroll-to="'#contact'"
              class="btn btn-enquire"
              >Enquire Now!</router-link
            >
          </div>
        </div>
      </div>

      <div class="col-lg-3 col-md-6 m-4 p-2 package package-3">
        <h3 class="mb-3">x</h3>
        <p class="pl-3">x</p>
        <ul>
          <li>x</li>
          <li>x</li>
          <li>x</li>
        </ul>
        <div class="row">
          <div class="col text-center learn-more">
            <button
              @click="
                setPackageProperties(x, x)
              "
              v-b-modal.packages-modal
              class="btn btn-learn-more"
            >
              Learn More...
            </button>
          </div>
          <div class="col text-center enquire-now">
            <router-link
              to="#contact"
              v-scroll-to="'#contact'"
              class="btn btn-enquire"
              >Enquire Now!</router-link
            >
          </div>
        </div>
      </div>
    </div>

Note: any custom CSS classes are just styling text or applying colour.

Solution

You can use flex, add .d-flex .flex-column to your div.packages and .flex-grow-1 to the nested element you want to grow to fill the space.

In the example below I just added a div.flex-grow-1 after the ul but you could just apply that class directly to the ul.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="row justify-content-center package-sections">
  <div class="col-lg-3 col-md-6 m-4 p-2 package package-1 d-flex flex-column">
    <h3 class="mb-3">x</h3>
    <ul>
      <li>x</li>
      <li>x</li>
      <li>x</li>
      <li>x</li>
      <li>x</li>
      <li>x</li>
      <li>x</li>
      <li>x</li>
      <li>x</li>
      <li>x</li>
    </ul>
    <div class="flex-grow-1"></div>
    <div class="row">
      <div class="col text-center learn-more">
        <button @click="
                setPackageProperties(x, x)
              " v-b-modal.packages-modal class="btn btn-learn-more">
           Learn More...
         </button>
      </div>
      <div class="col text-center enquire-now">
        <router-link to="#contact" v-scroll-to="'#contact'" class="btn btn-enquire">Enquire Now!</router-link>
      </div>
    </div>
  </div>

  <div class="col-lg-3 col-md-6 m-4 p-2 package package-2 d-flex flex-column">
    <h3 class="mb-3">x</h3>
    <p class="pl-3">x</p>
    <ul>
      <li>x</li>
      <li>x</li>
      <li>x</li>
    </ul>
    <div class="flex-grow-1"></div>
    <div class="row ">
      <div class="col text-center learn-more">
        <button @click="
                setPackageProperties(x, x)
              " v-b-modal.packages-modal class="btn btn-learn-more">
           Learn More...
         </button>
      </div>
      <div class="col text-center enquire-now">
        <router-link to="#contact" v-scroll-to="'#contact'" class="btn btn-enquire">Enquire Now!</router-link>
      </div>
    </div>
  </div>

  <div class="col-lg-3 col-md-6 m-4 p-2 package package-3 d-flex flex-column">
    <h3 class="mb-3">x</h3>
    <p class="pl-3">x</p>
    <ul>
      <li>x</li>
      <li>x</li>
      <li>x</li>
    </ul>
    <div class="flex-grow-1"></div>
    <div class="row">
      <div class="col text-center learn-more">
        <button @click="
                setPackageProperties(x, x)
              " v-b-modal.packages-modal class="btn btn-learn-more">
           Learn More...
         </button>
      </div>
      <div class="col text-center enquire-now">
        <router-link to="#contact" v-scroll-to="'#contact'" class="btn btn-enquire">Enquire Now!</router-link>
      </div>
    </div>
  </div>
</div>