"Tiles using bootstrap grid ( Winson222 )"
Bootstrap 4.1.1 Snippet by Winson222

<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> <!------ Include the above in your HEAD tag ----------> <div class="container" style="width:900px;padding-top: 50px;"> <div class="row"> <div class="col-6"><div class="plate">col-6 (L 50%)<img class="card-img" src="http://placehold.it/400x500" alt=""></div><br> <div class="row"> <div class="col-6"><div class="plate">col-6 (L 50%)<img class="card-img" src="http://placehold.it/400x400" alt=""></div></div> <div class="col-6"><div class="plate">col-6 (L 50%)<img class="card-img" src="http://placehold.it/400x400" alt=""></div></div> </div> </div> <div class="col-6"><div class="plate">col-6 (R 50%)<img class="card-img" src="http://placehold.it/600x400" alt=""></div><br> <div class="row"> <div class="col-7"><div class="plate">R 60%<img class="card-img" src="http://placehold.it/400x400" alt=""></div></div> <div class="col-5"><div class="plate">R 40%<img class="card-img" src="http://placehold.it/400x605" alt=""></div></div> </div><br> <div class="row"> <div class="col-5"><div class="plate">R 40%<img class="card-img" src="http://placehold.it/400x605" alt=""></div></div> <div class="col-7"><div class="plate">R 60%<img class="card-img" src="http://placehold.it/400x400" alt=""></div></div> </div><br> <div class="row"> <div class="col-12"><div class="plate">R 100%<img class="card-img" src="http://placehold.it/700x400" alt=""></div></div> </div> </div> </div> <br> <div class="row"> <div class="col"><div class="plate">col 100%<img class="card-img" src="http://placehold.it/800x200" alt="">Nested columns won't gives you full width to access. Reverse is possible</div></div> </div> </div>
.plate{color:hotpink;background: #000;padding: 5px;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);border-radius:5px;}
/* check this out=> https://bootsnipp.com/Winson222 */

Related: See More


Questions / Comments: