Position button on a fixed spot in a Panel

Question

I have got 3 panels next to each other. Each panel looks like this.

Now I would like to position the button on the bottom of the panel on a fixed position. So that when you see the panels next to each other, the buttons will be nicely lined out.

<div class="panel panel-default donation-panel">
    <div class="panel-body">
         <h4>Title</h4>
         <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sagittis cursus posuere. Sed pretium fermentum tempus. Aliquam nec vestibulum lacus.</p>
        <a href="#" class="btn btn-primary btn-block donation-link-button">Click</a>
    </div> <!-- end panel body -->
</div>

How can I achieve this ?

Thanks.

Answer 1

Place your button into the panel-footer class:

<div class="panel panel-default donation-panel">
    <div class="panel-body">
         <h4>Title</h4>
         <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sagittis cursus posuere. Sed pretium fermentum tempus. Aliquam nec vestibulum lacus.</p>
    </div> <!-- end panel body -->
    <div class="panel-footer">
         <a href="#" class="btn btn-primary btn-block donation-link-button">Click</a>
    </div>
</div>

Answer 2

Try to close your tag

Your code:

<a href="#" class="btn btn-primary btn-block donation-link-button">Click/a>

New code:

<a href="#" class="btn btn-primary btn-block donation-link-button">Click</a>