<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row p-0" id="gradient-header">
<div class="col-12 text-center mx-auto p-5">
<div class="f-prime large thirds">
Image Cards with Gradient Content
</div>
<div class="f-second text-light">
Designed by <a href="https://bootsnipp.com/sarwal" target="_blank" class="text-light">sarwal</a>.
Inspired by <a href="https://bootsnipp.com/YvesWassersleben" target="_blank" class="text-light">YvesWassersleben</a>.
Images referenced from <a href="https://pixabay.com/" target="_blank" class="text-light">pixabay</a>.
</div>
</div>
</div>
<div class="row bg-dark p-0">
<div class="col-12 mx-auto p-0">
<div class="row mx-auto p-2">
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-12 col-12 p-2 card">
<div class="thumbnail">
<img src="https://cdn.pixabay.com/photo/2016/12/30/07/59/kitchen-1940174_960_720.jpg">
<div class="caption">
<div class="f-prime sml primes">
Lorem ipsum.
</div>
<div class="f-third text-light">
Lorem ipsum dolor sit amet.
</div>
<hr>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Viverra adipiscing at in tellus integer feugiat scelerisque varius morbi. Augue neque gravida in fermentum et sollicitudin ac. Cursus sit amet dictum sit amet justo donec enim diam.
</p>
<div class="mb-0">
<a href="#link" class="btn btn-card">View More</a>
