Edit in JSFiddle

<article>
    <header>
        <div class="container">
            <div class="row">
                <div class="col-md-10 col-md-offset-1">
                    <h1>چند روش برای هم اندازه کردن ارتفاع ستون ها در بوتسرپ</h1>
                    <a href="http://zagros.pro/" class="btn btn-lg btn-info">در زاگرس پرو بخوانید</a>
                    <p class="note">این نمونه اولیه برای بررسی راه های حل مشکل هم ارتفاع نبودن ایجاد شده</p>
                </div>
            </div>
        </div>
    </header>
    <br />
    <br />
    <div class="big-sexy-buttons">
        <div class="container">
            <div class="row">
                <div class="col-sm-4">
                    <div class="box">
                        <h2>باکس اول</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad. adipisicing elit, sed do eiusmod tempor</p>
                        <a href="#" class="btn btn-primary">لینک</a>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="box">
                        <h2>باکس دوم</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
                        <a href="#" class="btn btn-primary">لینک</a>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="box">
                        <h2>باکس سوم با عنوان طولانی تر نسبت به دیگر باکس ها</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad</p>
                        <a href="#" class="btn btn-primary">لینک</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
</article>
body {
    background: #eee;
    padding: 50px 0 100px;
    -webkit-font-smoothing: antialiased;
}
a { transition: all 225ms ease; }
header {
    margin-bottom: 25px;
    text-align: center;
}
.big-sexy-buttons {
     margin-bottom: 25px;
}
header h1 { font-weight: 400; }
header .note {
    margin: 0;
    font-style: italic;
    max-width: 600px;
    margin: 55px auto 0;
}

.row { padding-top: 25px; padding-bottom: 25px; background: rgba(255, 255, 55, 0.3); }
[class*="col-"] { border: solid 1px #e3e3e3; border-top-width: 2px; border-bottom-width: 2px; padding-top: 25px; padding-bottom: 25px; background: rgba(255, 25, 255, 0.5); }
[class*="col-"]:first-child { border-left-width: 2px; }
[class*="col-"]:last-child { border-right-width: 2px; }

.box {
    padding: 25px 7% 0;
    text-align: center;
    position: relative;
    background: #fff;
}
.box h2 {
    font-weight: 300;
    letter-spacing: -0.05em;
    margin-bottom: 15px;
}
.box a {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    border-radius: 0;
    padding: 25px 0;
}
.box p {
    padding-bottom: 125px;
    font-size: 16px;
    font-weight: 300;
    opacity: 0.8;
}

.legend {
    position: fixed;
    top: 5px;
    right: 5px;
    text-align: center;
    border-radius: 3px;
    font-size: 12px;
    overflow: hidden;
}