Sandbox - Modern & Multipurpose Bootstrap 5 Template

Tiles 1

View example's code

<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 -->

Tiles 2

View example's code

<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 -->

Tiles 3

View example's code

<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 -->

Tiles 4

View example's code

<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 -->

Tiles 5

View example's code

<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 -->

Tiles 6

View example's code

<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 -->

Tiles 7

View example's code

<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 -->

Tiles 8

View example's code

<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 -->

Tiles 9

View example's code

<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 -->

Tiles 10

View example's code

<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 -->

Usage

Styleguide

Elements

Tiles

Tiles 1

Tiles 2

Tiles 3

Tiles 4

Tiles 5

Tiles 6

Tiles 7

Tiles 8

Tiles 9

Tiles 10

Think unique and be creative. Make a difference with Sandbox.