Media

Thumbnail Extend Bootstrap's grid system with the thumbnail component to easily display grids of images, videos, text, and more.

  • You can put anything here

Basic Example

By default, thumbnails are designed to showcase linked images with minimal required markup.


Custom content

With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.

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.

Button Button

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.

Button Button

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.

Button Button

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.

Button Button

Lightbox JQuery lightGallery is a lightweight jQuery lightbox gallery for displaying image and video gallery

Images

Videos

Media Payer HTML5 video and audio made easy. One file. Any browser. Same UI.

Basic Example

Multi-Codec with no JavaScript fallback player - Cross Browser

Youtube Video (Preview in server NOT local)

Youtube Video (Preview in server NOT local)

Carousel A slideshow component for cycling through elements, like a carousel.

Responsive Embed Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.

4:3 Aspect Ratio

16:9 Aspect Ratio