Use our tile options to arrange images with appealing styles.
<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"><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"><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"><img src="./assets/img/photos/ab3.jpg" srcset="./assets/img/photos/ab3@2x.jpg 2x" alt=""></figure> </div> <!--/column --> </div> <!--/.row -->
<div class="row gx-md-5 gy-5"> <div class="col-md-4 offset-md-1 align-self-end"> <figure class="rounded"><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"><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"><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"><img src="./assets/img/photos/g4.jpg" srcset="./assets/img/photos/g4@2x.jpg 2x" alt=""></figure> </div> <!--/column --> </div> <!--/.row -->
<div class="row gx-md-5 gy-5 align-items-center"> <div class="col-6"> <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"> <img class="img-fluid rounded shadow-lg mb-5" src="./assets/img/photos/sa14.jpg" srcset="./assets/img/photos/sa14@2x.jpg 2x" alt="" /> <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 -->
<div class="row gx-md-5 gy-5"> <div class="col-5"> <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="" /> <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"> <img class="img-fluid rounded shadow-lg mb-5" src="./assets/img/photos/sa11.jpg" srcset="./assets/img/photos/sa11@2x.jpg 2x" alt="" /> <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 -->
<div class="row gx-md-5 gy-5"> <div class="col-6"> <img class="img-fluid rounded shadow-lg mb-5" src="./assets/img/photos/sa5.jpg" srcset="./assets/img/photos/sa5@2x.jpg 2x" alt="" /> <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"> <img class="img-fluid rounded shadow-lg my-5" src="./assets/img/photos/sa7.jpg" srcset="./assets/img/photos/sa7@2x.jpg 2x" alt="" /> <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 -->
<div class="row gx-md-5 gy-5"> <div class="col-md-6"> <figure class="rounded mt-md-10 position-relative"><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"><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"><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 -->
<div class="row g-4"> <div class="col-4 d-flex flex-column ms-auto"> <div class="ms-auto mt-6"><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"><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"><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><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><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><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"><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"><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 -->
<div class="overlap-grid overlap-grid-2"> <div class="item"> <figure class="rounded shadow"><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"><img src="./assets/img/photos/about3.jpg" srcset="./assets/img/photos/about3@2x.jpg 2x" alt=""></figure> </div> <!--/.item --> </div> <!--/.overlap-grid -->
<div class="row gx-md-5 gy-5"> <div class="col-12"> <figure class="rounded mx-md-5"><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"><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"><img src="../../assets/img/photos/g10.jpg" srcset="../../assets/img/photos/g10@2x.jpg 2x" alt=""></figure> </div> <!--/column --> </div> <!--/.row -->
<div class="row gx-md-5 gy-5"> <div class="col-md-6"> <figure class="rounded"><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"><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"><img src="../../assets/img/photos/g11.jpg" srcset="../../assets/img/photos/g11@2x.jpg 2x" alt=""></figure> </div> <!--/column --> </div> <!--/.row -->
Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.