"responsive image grid"
Bootstrap 3.3.0 Snippet by hardiktrivedi

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container-fluid tbt_cmnt_grid"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="col-md-1"></div> <div class="col-md-10"> <div class="col-md-4"> <img src="https://place-hold.it/260x200"class="img-responsive"> <span>lorem ipsum lorem ipsum </span> <button type="button" class="btn btn-lg">watch the video ›</button> <img src="https://place-hold.it/260x400"class="img-responsive"> <span style="top: 50%">lorem ipsum lorem ipsum</span> <button type="button" class="btn btn-lg">learn more ›</button> <img src="https://place-hold.it/260x200"class="img-responsive"> <span style="top: 85%">lorem ipsum lorem ipsum lorem</span> <button type="button" class="btn btn-lg">watch the video ›</button> </div> <div class="col-md-4 col-xs-12"> <img src="https://place-hold.it/260x300"class="img-responsive"> <span style="top: 18%; margin-left: 15px;">lorem ipsum lorem ipsum lorem</span> <button type="button" class="btn btn-lg">learn more ›</button> <img src="https://place-hold.it/260x200"class="img-responsive"> <span style="top: 50%">lorem ipsum lorem ipsum lorem</span> <button type="button" class="btn btn-lg">watch the video ›</button> <img src="https://place-hold.it/260x300"class="img-responsive"> <span style="top: 85%">lorem ipsum lorem ipsum lorem?</span> <button type="button" class="btn btn-lg">watch the video ›</button> </div> <div class="col-md-4 col-xs-12"> <img src="https://place-hold.it/260x200" class="img-responsive"> <span>lorem ipsum lorem ipsum lorem ipsum</span> <button type="button" class="btn btn-lg">watch the video ›</button> <img src="https://place-hold.it/260x400" class="img-responsive"> <span style="top: 50%">lorem ipsum lorem ipsum lorem</span> <button type="button" class="btn btn-lg">learn more ›</button> <img src="https://place-hold.it/260x200" class="img-responsive"> <span style="top: 85%">lorem ipsum lorem ipsum lorem</span> <button type="button" class="btn btn-lg">watch the video ›</button> </div> </div> </div> </div> </div> </div>
.tbt_cmnt_grid { margin-top: 30px; } .tbt_cmnt_grid img { width: 100%; } .tbt_cmnt_grid span { color: #fff; position: absolute; top: 10%; text-align: center; font-size: 20px; text-transform: uppercase; margin-right: 15px; } .tbt_cmnt_grid .btn-lg { border-radius: 0px; background-color: #FFD51E; width: 100%; font-size: 11px; margin-top: 0px; margin-bottom: 5px; text-transform: uppercase; font-weight: 600; }

Related: See More


Questions / Comments: