Tiles
Use our tile options to arrange images with appealing styles.
Tiles 1
<div class="row gx-md-5 gy-5 align-items-center">
<div class="col-md-6">
<div class="row gx-md-5 gy-5">
<div class="col-md-10 offset-md-2">
<figure class="rounded"><nuxt-img src="/assets/img/photos/ab1.jpg" srcset="/assets/img/photos/ab1@2x.jpg 2x" alt=""></figure>
</div>
<!--/column -->
<div class="col-md-12">
<figure class="rounded"><nuxt-img src="/assets/img/photos/ab2.jpg" srcset="/assets/img/photos/ab2@2x.jpg 2x" alt=""></figure>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
<div class="col-md-6">
<figure class="rounded"><nuxt-img src="/assets/img/photos/ab3.jpg" srcset="/assets/img/photos/ab3@2x.jpg 2x" alt=""></figure>
</div>
<!--/column -->
</div>
<!--/.row -->Tiles 2
<div class="row gx-md-5 gy-5">
<div class="col-md-4 offset-md-1 align-self-end">
<figure class="rounded"><nuxt-img src="/assets/img/photos/g1.jpg" srcset="/assets/img/photos/g1@2x.jpg 2x" alt=""></figure>
</div>
<!--/column -->
<div class="col-md-6 align-self-end">
<figure class="rounded"><nuxt-img src="/assets/img/photos/g2.jpg" srcset="/assets/img/photos/g2@2x.jpg 2x" alt=""></figure>
</div>
<!--/column -->
<div class="col-md-6">
<figure class="rounded"><nuxt-img src="/assets/img/photos/g3.jpg" srcset="/assets/img/photos/g3@2x.jpg 2x" alt=""></figure>
</div>
<!--/column -->
<div class="col-md-4 align-self-start">
<figure class="rounded"><nuxt-img src="/assets/img/photos/g4.jpg" srcset="/assets/img/photos/g4@2x.jpg 2x" alt=""></figure>
</div>
<!--/column -->
</div>
<!--/.row -->Tiles 3
<div class="row gx-md-5 gy-5 align-items-center">
<div class="col-6">
<nuxt-img class="img-fluid rounded shadow-lg d-flex ms-auto" src="/assets/img/photos/sa13.jpg" srcset="/assets/img/photos/sa13@2x.jpg 2x" alt="" />
</div>
<!-- /column -->
<div class="col-6">
<nuxt-img class="img-fluid rounded shadow-lg mb-5" src="/assets/img/photos/sa14.jpg" srcset="/assets/img/photos/sa14@2x.jpg 2x" alt="" />
<nuxt-img class="img-fluid rounded shadow-lg d-flex col-10" src="/assets/img/photos/sa15.jpg" srcset="/assets/img/photos/sa15@2x.jpg 2x" alt="" />
</div>
<!-- /column -->
</div>
<!-- /.row -->Tiles 4
<div class="row gx-md-5 gy-5">
<div class="col-5">
<nuxt-img class="img-fluid rounded shadow-lg my-5 d-flex ms-auto" src="/assets/img/photos/sa9.jpg" srcset="/assets/img/photos/sa9@2x.jpg 2x" alt="" />
<nuxt-img class="img-fluid rounded shadow-lg d-flex col-10 ms-auto" src="/assets/img/photos/sa10.jpg" srcset="/assets/img/photos/sa10@2x.jpg 2x" alt="" />
</div>
<!-- /column -->
<div class="col-7">
<nuxt-img class="img-fluid rounded shadow-lg mb-5" src="/assets/img/photos/sa11.jpg" srcset="/assets/img/photos/sa11@2x.jpg 2x" alt="" />
<nuxt-img class="img-fluid rounded shadow-lg d-flex col-11" src="/assets/img/photos/sa12.jpg" srcset="/assets/img/photos/sa12@2x.jpg 2x" alt="" />
</div>
<!-- /column -->
</div>
<!-- /.row -->Tiles 5
<div class="row gx-md-5 gy-5">
<div class="col-6">
<nuxt-img class="img-fluid rounded shadow-lg mb-5" src="/assets/img/photos/sa5.jpg" srcset="/assets/img/photos/sa5@2x.jpg 2x" alt="" />
<nuxt-img class="img-fluid rounded shadow-lg d-flex col-10 ms-auto" src="/assets/img/photos/sa6.jpg" srcset="/assets/img/photos/sa6@2x.jpg 2x" alt="" />
</div>
<!-- /column -->
<div class="col-6">
<nuxt-img class="img-fluid rounded shadow-lg my-5" src="/assets/img/photos/sa7.jpg" srcset="/assets/img/photos/sa7@2x.jpg 2x" alt="" />
<nuxt-img class="img-fluid rounded shadow-lg d-flex col-10" src="/assets/img/photos/sa8.jpg" srcset="/assets/img/photos/sa8@2x.jpg 2x" alt="" />
</div>
<!-- /column -->
</div>
<!-- /.row -->Tiles 6
<div class="row gx-md-5 gy-5">
<div class="col-md-6">
<figure class="rounded mt-md-10 position-relative"><nuxt-img src="/assets/img/photos/g5.jpg" srcset="/assets/img/photos/g5@2x.jpg 2x" alt=""></figure>
</div>
<!--/column -->
<div class="col-md-6">
<div class="row gx-md-5 gy-5">
<div class="col-md-12 order-md-2">
<figure class="rounded"><nuxt-img src="/assets/img/photos/g6.jpg" srcset="/assets/img/photos/g6@2x.jpg 2x" alt=""></figure>
</div>
<!--/column -->
<div class="col-md-10">
<figure class="rounded"><nuxt-img src="/assets/img/photos/g7.jpg" srcset="/assets/img/photos/g7@2x.jpg 2x" alt=""></figure>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
</div>
<!--/.row -->Tiles 7
<div class="row g-4">
<div class="col-4 d-flex flex-column ms-auto">
<div class="ms-auto mt-6"><nuxt-img class="img-fluid rounded shadow-lg" src="/assets/img/demos/vc1.jpg" srcset="/assets/img/demos/vc1@2x.jpg 2x" alt="" /></div>
<div class="ms-auto mt-4"><nuxt-img class="img-fluid rounded shadow-lg" src="/assets/img/demos/vc2.jpg" srcset="/assets/img/demos/vc2@2x.jpg 2x" alt="" /></div>
<div class="ms-auto mt-4"><nuxt-img class="img-fluid rounded shadow-lg" src="/assets/img/demos/vc3.jpg" srcset="/assets/img/demos/vc3@2x.jpg 2x" alt="" /></div>
</div>
<!-- /column -->
<div class="col-4">
<div><nuxt-img class="w-100 img-fluid rounded shadow-lg" src="/assets/img/demos/vc4.jpg" srcset="/assets/img/demos/vc4@2x.jpg 2x" alt="" /></div>
<div><nuxt-img class="w-100 img-fluid rounded shadow-lg mt-4" src="/assets/img/demos/vc5.jpg" srcset="/assets/img/demos/vc5@2x.jpg 2x" alt="" /></div>
<div><nuxt-img class="w-100 img-fluid rounded shadow-lg mt-4" src="/assets/img/demos/vc6.jpg" srcset="/assets/img/demos/vc6@2x.jpg 2x" alt="" /></div>
</div>
<!-- /column -->
<div class="col-4 d-flex flex-column">
<div class="mt-8"><nuxt-img class="img-fluid rounded shadow-lg" src="/assets/img/demos/vc7.jpg" srcset="/assets/img/demos/vc7@2x.jpg 2x" alt="" /></div>
<div class="mt-4 mb-10"><nuxt-img class="img-fluid rounded shadow-lg" src="/assets/img/demos/vc8.jpg" srcset="/assets/img/demos/vc8@2x.jpg 2x" alt="" /></div>
</div>
<!-- /column -->
</div>
<!-- /.row -->Tiles 8
<div class="overlap-grid overlap-grid-2">
<div class="item">
<figure class="rounded shadow"><nuxt-img src="/assets/img/photos/about2.jpg" srcset="/assets/img/photos/about2@2x.jpg 2x" alt=""></figure>
</div>
<!--/.item -->
<div class="item">
<figure class="rounded shadow"><nuxt-img src="/assets/img/photos/about3.jpg" srcset="/assets/img/photos/about3@2x.jpg 2x" alt=""></figure>
</div>
<!--/.item -->
</div>
<!--/.overlap-grid -->Tiles 9
<div class="row gx-md-5 gy-5">
<div class="col-12">
<figure class="rounded mx-md-5"><nuxt-img src="/assets/img/photos/g8.jpg" srcset="/assets/img/photos/g8@2x.jpg 2x" alt=""></figure>
</div>
<!--/column -->
<div class="col-md-6">
<figure class="rounded"><nuxt-img src="/assets/img/photos/g9.jpg" srcset="/assets/img/photos/g9@2x.jpg 2x" alt=""></figure>
</div>
<!--/column -->
<div class="col-md-6">
<figure class="rounded"><nuxt-img src="/assets/img/photos/g10.jpg" srcset="/assets/img/photos/g10@2x.jpg 2x" alt=""></figure>
</div>
<!--/column -->
</div>
<!--/.row -->Tiles 10
<div class="row gx-md-5 gy-5">
<div class="col-md-6">
<figure class="rounded"><nuxt-img src="/assets/img/photos/g12.jpg" srcset="/assets/img/photos/g12@2x.jpg 2x" alt=""></figure>
</div>
<!--/column -->
<div class="col-md-6 align-self-end">
<figure class="rounded"><nuxt-img src="/assets/img/photos/g13.jpg" srcset="/assets/img/photos/g13@2x.jpg 2x" alt=""></figure>
</div>
<!--/column -->
<div class="col-12">
<figure class="rounded mx-md-5"><nuxt-img src="/assets/img/photos/g11.jpg" srcset="/assets/img/photos/g11@2x.jpg 2x" alt=""></figure>
</div>
<!--/column -->
</div>
<!--/.row -->Think unique and be creative. Make a difference with Sandbox.
Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.
Buy Sandbox Nuxtjs