Aligning Links/Buttons in columns

Question

i would like the buttons at the bottom to all be lined up. Cards Not Lining up

i have been trying to get this to work by following the instructions here : Align two buttons at the bottom

But i still can't seem to get it working properly. as my card isn't growing with the link text. And the cards aren't displaying correctly in the example if i run it, but it was working with codepen.

Heres my code:

.card {
  text-align: center;
  background-color: green;
  border-style: unset;
  position: relative;
  padding-bottom: 40px;
}

.card-links {
  position: absolute;
  left: 50%;
  top: 250px;
  margin-top: 25%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div class="section2">
  <div class="container">
    <div class="maintext">
      <h1>Our Vision</h1>
    </div>
    <div class="subtext">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div class="row">

      <div class="col-md-4">
        <div class="card">
          <div class="images">
            <img src="" alt="" width="80" height="80">
          </div>
          <h2>Some Text Over Here
            <BR>
          </h2>
          <div class="card-links" class="card1"><a href="#">Watch Video</a></div>
        </div>
      </div>

      <div class="col-md-4">
        <div class="card">
          <div class="images">
            <img src="">
          </div>
          <h2>Even More Text.
            <BR>Over Here Blah BLah</h2>
          <div class="card-links" id="card2"><a href="#">Read More</a></div>
        </div>
      </div>

      <div class="col-md-4">
        <div class="card">
          <div class="images">
            <img src="">
          </div>
          <h2>Some & Text
            <BR>
          </h2>
          <div class="card-links" id="card3"><a href="#">Watch Now</a></div>

Answer 1

Please check below mentioned solution. Hope it will help you.

    h1 {
        font-size: 38pt;
    }

    p {
        font-size: 17pt;
    }

    .card {
        text-align: center;
        background-color: green;
        border-style: unset;
        position: relative;
        margin-bottom: 40px;
        height: 150px;
    }

    .card-links {
        position: absolute;
        bottom: -30px;
        left: 50%;
        transform: translateX(-50%);
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="section2">
    <div class="container">
        <div class="maintext">
            <h1>Our Vision</h1>
        </div>
        <div class="subtext">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
                dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div class="row">

            <div class="col-md-4 col-md-4 col-sm-12">
                <div class="card">
                    <div class="images">
                        <img src="" alt="" width="80" height="80">
                    </div>
                    <h2>Some Text Over Here
                        <BR>
                    </h2>
                    <div class="card-links" class="card1">
                        <a href="#">Watch Video</a>
                    </div>
                </div>
            </div>

            <div class="col-md-4 col-md-4 col-sm-12">
                <div class="card">
                    <div class="images">
                        <img src="">
                    </div>
                    <h2>Even More Text.
                        <BR>Over Here Blah BLah</h2>
                    <div class="card-links" id="card2">
                        <a href="#">Read More</a>
                    </div>
                </div>
            </div>

            <div class="col-md-4 col-md-4 col-sm-12">
                <div class="card">
                    <div class="images">
                        <img src="">
                    </div>
                    <h2>Some & Text
                        <BR>
                    </h2>
                    <div class="card-links" id="card3">
                        <a href="#">Watch Now</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>