Q:

Bootstrap align-items-end but without the columns

I need to align the elements inside a div to the end.  And as I understand from Bootstrap's documentation, I should use d-flex and align-items-end.  When I apply it, it sticks the elements to the bottom, but it also splits them into columns.  And I don't want that. 
What do I need to do to fix it? 

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />

<div class="row">
  <div class="col-5">
    <div class="card">
      <div class="card-body text-left d-flex align-items-end">
        <a href="#" class="card-link">Link</a>
        <a href="#" class="card-link">Link</a>
        <h5 class="card-title">Title</h5>
        <p class="card-text">Text goes here</p>
        <a href="#" class="btn">Button</a>
        <a href="#" class="btn">Button</a>
      </div>
    </div>
  </div>
</div>

A:

To stack elements on top of each other, use flex-column, and for column items to align at bottom, you need to use justify-content-end instead of align-items-end. 
Note, the horizontal misalignment is caused by the different class set on the a/h5/p elements. 
Stack snippet

.card {
  height: 300px;      /*  just for this demo, so one can see how it aligns 
 */
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />

<div class="row">
  <div class="col-5">
    <div class="card">
      <div class="card-body text-left d-flex flex-column justify-content-end">
        <a href="#" class="card-link">Link</a>
        <a href="#" class="card-link">Link</a>
        <h5 class="card-title">Title</h5>
        <p class="card-text">Text goes here</p>
        <a href="#" class="btn">Button</a>
        <a href="#" class="btn">Button</a>
      </div>
    </div>
  </div>
</div>

