<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"> <div class="row"> <div class="col"> <h2>Image Gallery</h2> </div> </div> <div class="row"> <div class="col"> <div class="grid"> <div class="item"> <img src="https://dummyimage.com/360x200/000/fff" alt="image"> </div> <div class="item"> <img src="https://dummyimage.com/360x200/000/fff" alt="image"> </div> <div class="item"> <img src="https://dummyimage.com/360x200/000/fff" alt="image"> </div> </div> </div> </div> <div class="row"> <div class="col"> <div class="grid"> <div class="item"> <img src="https://dummyimage.com/360x200/000/fff" alt="image"> </div> <div class="item"> <img src="https://dummyimage.com/360x200/000/fff" alt="image"> </div> <div class="item"> <img src="https://dummyimage.com/360x200/000/fff" alt="image"> </div> </div> </div> </div> <div class="row"> <div class="col"> <div class="grid"> <div class="item"> <img src="https://dummyimage.com/360x200/000/fff" alt="image"> </div> <div class="item"> <img src="https://dummyimage.com/360x200/000/fff" alt="image"> </div> <div class="item"> <img src="https://dummyimage.com/360x200/000/fff" alt="image"> </div> </div> </div> </div> <div class="row"> <div class="col"> <div class="grid"> <div class="item"> <img src="https://dummyimage.com/360x200/000/fff" alt="image"> </div> <div class="item"> <img src="https://dummyimage.com/360x200/000/fff" alt="image"> </div> <div class="item"> <img src="https://dummyimage.com/360x200/000/fff" alt="image"> </div> </div> </div> </div> <div class="row"> <div class="col"> <div class="grid"> <div class="item"> <img src="https://dummyimage.com/360x200/000/fff" alt="image"> </div> <div class="item"> <img src="https://dummyimage.com/360x200/000/fff" alt="image"> </div> <div class="item"> <img src="https://dummyimage.com/360x200/000/fff" alt="image"> </div> </div> </div> </div> <div class="row"> <div class="col"> <div class="grid"> <div class="item"> <img src="https://dummyimage.com/360x200/000/fff" alt="image"> </div> <div class="item"> <img src="https://dummyimage.com/360x200/000/fff" alt="image"> </div> <div class="item"> <img src="https://dummyimage.com/360x200/000/fff" alt="image"> </div> </div> </div> </div> <div class="row"> <div class="col"> <button type="button" class="btn btn-link" onclick="topFunction()">Back to top</button> </div> </div> </div>

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap: 12px; } .item { min-height: 170px; } .col{ margin: 6px; }

function topFunction() { document.body.scrollTop = 0; document.documentElement.scrollTop = 0; }