<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-lg-3">
<div class="card">
<img class="card-img-top" src="http://placehold.it/250x150" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title.</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer..</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col-xs-12 col-md-6 col-lg-3">
<div class="card">
<img class="card-img-top" src="http://placehold.it/250x150" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix hidden-sm-down hidden-lg-up"></div>
<div class="col-xs-12 col-md-6 col-lg-3">
<div class="card">
<img class="card-img-top" src="http://placehold.it/250x150" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div></div>
<div class="col-xs-12 col-md-6 col-lg-3">
<div class="card">
<img class="card-img-top" src="http://placehold.it/250x150" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div></div>
<div class="col-xs-12 col-md-6 col-lg-3">
<div class="card">
<img class="card-img-top" src="http://placehold.it/250x150" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div></div>
</div>
</div>
a {
-webkit-transition: .25s all;
transition: .25s all;
}
.card {
padding-left:auto;
padding-right:auto;
min-height:500px;
margin-top:15px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-webkit-transition: .25s box-shadow;
transition: .25s box-shadow;
}
.card:focus, .card:hover {
box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}
.card-inverse .card-img-overlay {
background-color: rgba(51, 51, 51, 0.85);
border-color: rgba(51, 51, 51, 0.85);
}
.card-img-top{
margin-top:10px;
}
.col-xs-12{
text-align:center;
margin-left:auto;
margin-right:auto;
}
.row{
margin-left:auto;
margin-right:auto;
}