How to align buttons in a card using html boostrap

Question

I'm looking for a solution to get all my buttons in one horizontal line.

There a two different problems with this alignment:

1. The "Find out more" buttons in every card are immediately after the last text row and therefore not in a horizontal line.

2. The "Factsheet"-Button is in the order of the "Find out more" buttons a <button> element and therefore by default not in an horizontal line with the other elemts.

How can I solve my problem(s)? I tried some changes within the CSS file (like margin-top: auto;), but that didn't work.

Here a snippet of my actual html code:

<div class="card-body" style="padding: 0">
      <p class="card-text">        
        <ul>
            <li>text</li>                
            <li>text</li>
        </ul>
        <span style="padding: 1.25em;"><a href="text.html" class="btn btn-sm btn-secondary stretched-link">Find out more</a> </span>
    <button>
            <span style="padding: 1.25em;"><a href="text.pdf" class="btn btn-sm btn-secondary stretched-link" target="_blank">Factsheet</a> </span>
    </button>
      </p>
    </div>

and the according CSS:

.project_card_body {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1.25rem;
}

Answer 1

Assuming you are using .card-deck or .card-group, you can use a div.card-footer in each card to hold the buttons and just use a.btn for the buttons.

<div class="card-deck">
  ...
  <div class="card">
    <div class="card-body">
      ...
    </div>
    <div class="card-footer">
      <a href="text.html" class="btn btn-sm btn-secondary" style="padding: 1.25em;">Find out more</a>
      <a href="text.pdf" class="btn btn-sm btn-secondary" style="padding: 1.25em;" target="_blank">Factsheet</a>
    </div>
  </div>
  ...
</div>

see jsfiddle