Images

Bootstrap Documentation

Image grid

Apcrat Exclusive

Responsive image grid layouts.

...
...
...
...
...
...
...
<div class="img-grid img-grid-1">
  <div class="img-grid-item">

    <!-- Image -->
    <img class="img-fluid rounded-top-start-3 rounded-top-end-3 shadow-lg" data-jarallax-element="-30" src="../assets/img/avatars/avatar-jumbo-1.jpg" alt="...">

  </div>
  <div class="img-grid-item">

    <!-- Image -->
    <img class="img-fluid rounded-top-start rounded-bottom-end shadow-lg" data-jarallax-element="-85" src="../assets/img/avatars/avatar-2.jpg" alt="...">

  </div>
  <div class="img-grid-item">

    <!-- Image -->
    <img class="img-fluid rounded-top-start rounded-bottom-end shadow-lg" data-jarallax-element="-45" src="../assets/img/avatars/avatar-8.jpg" alt="...">

  </div>
  <div class="img-grid-item">

    <!-- Image -->
    <img class="img-fluid rounded-top-start rounded-bottom-end shadow-lg" data-jarallax-element="-50" src="../assets/img/avatars/avatar-10.jpg" alt="...">

  </div>
  <div class="img-grid-item">

    <!-- Image -->
    <img class="img-fluid rounded-top-start rounded-bottom-end shadow-lg" data-jarallax-element="-20" src="../assets/img/avatars/avatar-6.jpg" alt="...">

  </div>
  <div class="img-grid-item">

    <!-- Image -->
    <img class="img-fluid rounded-top-start rounded-bottom-end shadow-lg" data-jarallax-element="-15" src="../assets/img/avatars/avatar-4.jpg" alt="...">

  </div>
  <div class="img-grid-item">

    <!-- Image -->
    <img class="img-fluid rounded-top-start rounded-bottom-end shadow-lg" data-jarallax-element="-10" src="../assets/img/avatars/avatar-3.jpg" alt="...">

  </div>
</div>
...
...
...
<div class="img-grid img-grid-2">
  <div class="img-grid-item">

    <!-- Image -->
    <img class="img-fluid border border-4 border-md-7 border-white shadow" src="../assets/img/coworking/office-1.jpg" alt="..." data-jarallax-element="-75">

  </div>
  <div class="img-grid-item">

    <!-- Image -->
    <img class="img-fluid border border-4 border-md-7 border-white shadow" src="../assets/img/coworking/office-2.jpg" alt="..." data-jarallax-element="-45">

  </div>
  <div class="img-grid-item">

    <!-- Image -->
    <img class="img-fluid border border-4 border-md-7 border-white shadow" src="../assets/img/coworking/office-3.jpg" alt="..." data-jarallax-element="-25">

  </div>
</div>
...
...
...

I walked in the door at Pinterest and realized within 15 minutes of my interviews that I was going to get this job thanks to Apcrat.

...

Katie Williams

Developer at Pinterest

I started this course without understanding variables. I left with a full-time position at Netflix as a developer. Wild.

...

Jenny Fyfe

React at Netflix

<div class="img-grid img-grid-3">
  <div class="img-grid-item">

    <!-- Image -->
    <img class="img-fluid border border-4 border-md-7 border-white shadow" src="../assets/img/course/office-2.jpg" alt="..." data-jarallax-element="-55">

  </div>
  <div class="img-grid-item">

    <!-- Image -->
    <img class="img-fluid border border-4 border-md-7 border-white shadow" src="../assets/img/course/office-1.jpg" alt="..." data-jarallax-element="-105">

  </div>
  <div class="img-grid-item">

    <!-- Image -->
    <img class="img-fluid border border-4 border-md-7 border-white shadow" src="../assets/img/course/office-3.jpg" alt="..." data-jarallax-element="-35">

  </div>
  <div class="img-grid-item">

    <!-- Card -->
    <div class="card">
      ...
    </div>

  </div>
</div>
...
...
...
<div class="img-grid img-grid-4">
  <div class="img-grid-item">

    <!-- Image -->
    <img class="img-fluid border border-4 border-md-7 border-white shadow" src="../assets/img/career/office-1.jpg" alt="..." data-jarallax-element="-85">

  </div>
  <div class="img-grid-item">

    <!-- Image -->
    <img class="img-fluid border border-4 border-md-7 border-white shadow" src="../assets/img/career/office-2.jpg" alt="..." data-jarallax-element="-50">

  </div>
  <div class="img-grid-item">

    <!-- Image -->
    <img class="img-fluid border border-4 border-md-7 border-white shadow" src="../assets/img/career/office-3.jpg" alt="..." data-jarallax-element="-25">

  </div>
</div>