<div class="section">
    <div class="container">
        <div class="row flex-row-stretch">
            <div class="col-sm-6 col-md-4 col-lg-3 flex-col">
                <div class="card">
                    <div class="card-label">Category</div>
                    <div class="card-photo" style="background-image: url(https://itagroup.hs.llnwd.net/o40/csg/btr2018/news-banner-bike.jpg);"></div>
                    <div class="card-body">
                        <h4>Super stellar headline</h4>

                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        <a class="btn btn-primary" href="#">Learn More</a>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4 col-lg-3 flex-col">
                <div class="card">
                    <div class="card-label">Category</div>
                    <div class="card-photo" style="background-image: url(https://itagroup.hs.llnwd.net/o40/csg/btr2018/news-banner-vto.jpg);"></div>
                    <div class="card-body">
                        <h4>This is one flexy little card ready for action</h4>

                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        <a class="btn btn-primary" href="#">Learn More</a>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4 col-lg-3 flex-col">
                <div class="card">
                    <div class="card-label">Category</div>
                    <div class="card-photo" style="background-image: url(https://itagroup.hs.llnwd.net/o40/csg/btr2018/news-banner-finance2.jpg);"></div>
                    <div class="card-body">
                        <h4>Card headline here</h4>

                        <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        <a class="btn btn-primary" href="#">Learn More</a>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4 col-lg-3 flex-col">
                <div class="card">
                    <div class="card-label">Category</div> 
                    <div class="card-photo" style="background-image: url(https://itagroup.hs.llnwd.net/o40/csg/btr2018/news-banner-lunch.jpg);"></div>
                    <div class="card-body">
                        <h4>This is a statement that can't be missed</h4>

                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                        <a class="btn btn-primary" href="#">Learn More</a>
                    </div>
                </div>
            </div>
          <div class="col-sm-6 col-md-4 col-lg-3 flex-col">
                <div class="card">
                    <div class="card-label">Category</div>
                    <div class="card-photo" style="background-image: url(https://itagroup.hs.llnwd.net/o40/csg/btr2018/news-banner-stand.jpg);"></div>
                    <div class="card-body">
                        <h4>Wow a second row works well too!</h4>

                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                        <a class="btn btn-primary" href="#">Learn More</a>
                    </div>
                </div>
            </div>
          <div class="col-sm-6 col-md-4 col-lg-3 flex-col">
                <div class="card">
                    <div class="card-label">Category</div>
                    <div class="card-photo" style="background-image: url(https://itagroup.hs.llnwd.net/o40/csg/btr2018/news-banner-walking.jpg);"></div>
                    <div class="card-body">
                        <h4>Headlines are so fun.</h4>

                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                        <a class="btn btn-primary" href="#">Learn More</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
.section {
  padding: 50px 0;
}

.flex-row-stretch {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
}

.flex-col {
    margin-bottom: 30px;
}

@media (max-width: 768px) {
.flex-col {
    width: 100%;
    margin-bottom: 15px;
}
}


/* ======Cards======= */

.card {
    position: relative;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
    text-align: left;
    border-radius: 6px;
    box-shadow: 0 4px 15px -2px rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 4px 15px -2px rgba(0, 0, 0, .2);
    background-color: #fff;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.card-body {
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.card-label {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    font-size: 13px;
    color: #fff;
    background-color: #231f20;
    padding: 7px 15px;
}

.card-photo {
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
  height: 100px;
}

.card p {
    font-size: 15px;
    margin-bottom: 20px;
}

.card h4 {
    text-align: left !important;
    margin: 0 0 13px;
}

.card a {
    align-self: end;
    margin-top: auto;
}
Run Pen

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js