Top Color:
Main Color:
Bottom Color:
You are Here : Features  >  Typography  >  Thumbnails
Sunday , April , 05 2020

Thumbnails Grids of images, videos, text, and more

Default thumbnails

  1. <div class="row-fluid">
  2.     <ul class="thumbnails">
  3.         <li class="span3">
  4.             <a href="#" class="thumbnail">
  5.                 <img alt="" src="/portals/4/260x180.png" />
  6.             </a>
  7.        </li>
  8.         <li class="span3">
  9.             <a href="#" class="thumbnail">
  10.                 <img alt="" src="/portals/4/260x180.png" />
  11.             </a>
  12.        </li>
  13.         <li class="span3">
  14.             <a href="#" class="thumbnail">
  15.                 <img alt="" src="/portals/4/260x180.png" />
  16.             </a>
  17.        </li>
  18.         <li class="span3">
  19.             <a href="#" class="thumbnail">
  20.                 <img alt="" src="/portals/4/260x180.png" />
  21.             </a>
  22.        </li>
  23.     </ul>
  24. </div>

Highly customizable

  • Thumbnail label

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Action Action

  • Thumbnail label

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Action Action

  • Thumbnail label

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    Action Action

  1. <div class="row-fluid">
  2.     <ul class="thumbnails">
  3.         <li class="span4">
  4.             <div class="thumbnail">
  5.                 <img src="/portals/4/300x200.png" alt="">
  6.                 <div class="caption">
  7.                     <h3>Thumbnail label</h3>
  8.                      <p>Thumbnail caption...</p>
  9.                      <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
  10.                 </div>
  11.             </div>
  12.         </li>
  13.         <li class="span4">
  14.             <div class="thumbnail">
  15.                 <img src="/portals/4/300x200.png" alt="">
  16.                 <div class="caption">
  17.                     <h3>Thumbnail label</h3>
  18.                      <p>Thumbnail caption...</p>
  19.                      <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
  20.                 </div>
  21.             </div>
  22.         </li>
  23.         <li class="span4">
  24.             <div class="thumbnail">
  25.                 <img src="/portals/4/300x200.png" alt="">
  26.                 <div class="caption">
  27.                     <h3>Thumbnail label</h3>
  28.                      <p>Thumbnail caption...</p>
  29.                      <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
  30.                 </div>
  31.             </div>
  32.         </li>
  33.     </ul>
  34. </div>