Thumbnails & carousels

  1. Home
  2. Pages
  3. Current Page

Thumbnails

...
...
...
... 

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

Custom Content

...

Thumbnail label

Ipsa dignissimos maiores asperiores quisquam unde debitis sed suscipit magnam harum laudantium repellendus mollitia natus perspiciatis voluptas aliquam nam minima inventore qui in nulla porro, dicta quidem. Totam, atque corporis unde.

Button Button

...

Thumbnail label

Ipsa dignissimos maiores asperiores quisquam unde debitis sed suscipit magnam harum laudantium repellendus mollitia natus perspiciatis voluptas aliquam nam minima inventore qui in nulla porro, dicta quidem. Totam, atque corporis unde.

Button Button

...

Thumbnail label

Ipsa dignissimos maiores asperiores quisquam unde debitis sed suscipit magnam harum laudantium repellendus mollitia natus perspiciatis voluptas aliquam nam minima inventore qui in nulla porro, dicta quidem. Totam, atque corporis unde.

Button Button


<div class="thumbnail"> <a href="#"><img class="img-fullwidth" src="https://placehold.it/300x200" alt="..."></a>
  <div class="caption">
    <h3>Thumbnail label</h3>
    <p>..........</p>
    <p><a href="#" class="btn btn-dark btn-flat" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
  </div>
</div>

Thumbnails carousel

Bootstrap carousel


Bootstrap carousel
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
  <!-- Indicators -->
  <ol class='carousel-indicators'>
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>
  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active"> <img src="https://placehold.it/760x350&text=slide1" alt="" /> </div>
    <div class="item"> <img src="https://placehold.it/760x350&text=slide2" alt="" /> </div>
    <div class="item"> <img src="https://placehold.it/760x350&text=slide3" alt="" /> </div>
  </div>
  <!-- Controls --> 
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> 
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> 
</div>