• Call Us: 0111 222 333
  • Mail: info@domain.com
  • Register
Login
en-USde-DE
Revolution DNN Responsive Theme
  • Home
    • Home Version 1
    • Home Version 2
    • Home Version 3
    • Home Version 4
    • Home Version 5
    • Home Version 6
    • Home Paralex 7
    • Home Video 8
    • Home Version 9
    • Home Version 10
  • Colors
    • Turquoise
    • Chocolate
    • Dodger Blue
    • Aqua Blue
    • Green
    • Olive Green
    • Slate Gray
    • Orange
    • Red
    • Purple
    • Brown
    • Limegreen
  • Mega Menu
    • BoxedVersion
    • BoxedInner Page
    • Demo Menu
  • Features
    • Headers
      • Header1 - RightMenu
      • Header2 - CenterMenu
      • Header3 - LeftMenu
      • Header4 - NoTopbar
    • Footers
      • Footer Version 1
      • Footer Version 2
      • Footer Version 3
      • Footer Version 4
      • Footer Version 5
      • Footer Version 6
    • Bootstrap Componentes
      • Global settings
      • Typography
      • Button groups
      • Buttons
      • Code
      • Images
      • Alerts
      • Tables
    • Others
      • Video Shortcode
      • Promo Box
      • Highlighted Text
      • Dividers & Gaps
      • Media object
      • Teasers
      • Testimonials
      • Font Awesome Icons
    • Pane Layouts
      • Home Page Layouts
      • Left Side Layouts
      • Right Side Layouts
    • Sliders
      • Responsive Nivo Slider
      • Responsive Flex Slider
      • Responsive Bx Slider
    • Accordion
    • User Interfaces
    • CSS3 Animation Content
    • Carousel
    • Portfolio
  • Pages
    • Left Side Pages
    • Right Side Pages
    • About Us
    • Meet the Team
    • Coming Soon
    • Pricing Table
    • Services
    • Career
    • FAQ
    • Our Office
    • 404 Page
    • Blank Pages
  • Containers
    • Turquoise Container
    • Chocolate Container
    • Dodgerblue Container
    • Green Container
    • Aqua Blue Container
    • Olivegreen Container
    • Orange Container
    • Purple Container
    • Red Container
    • Slategray Container
    • Brown Container
    • Limegreen Container
  • Contact Us
Go to...
  • Home
    • Home Version 1
    • Home Version 2
    • Home Version 3
    • Home Version 4
    • Home Version 5
    • Home Version 6
    • Home Paralex 7
    • Home Video 8
    • Home Version 9
    • Home Version 10
  • Colors
    • Turquoise
    • Chocolate
    • Dodger Blue
    • Aqua Blue
    • Green
    • Olive Green
    • Slate Gray
    • Orange
    • Red
    • Purple
    • Brown
    • Limegreen
  • Mega Menu
    • BoxedVersion
    • BoxedInner Page
    • Demo Menu
  • Features
    • Headers
      • Header1 - RightMenu
      • Header2 - CenterMenu
      • Header3 - LeftMenu
      • Header4 - NoTopbar
    • Footers
      • Footer Version 1
      • Footer Version 2
      • Footer Version 3
      • Footer Version 4
      • Footer Version 5
      • Footer Version 6
    • Bootstrap Componentes
      • Global settings
      • Typography
      • Button groups
      • Buttons
      • Code
      • Images
      • Alerts
      • Tables
    • Others
      • Video Shortcode
      • Promo Box
      • Highlighted Text
      • Dividers & Gaps
      • Media object
      • Teasers
      • Testimonials
      • Font Awesome Icons
    • Pane Layouts
      • Home Page Layouts
      • Left Side Layouts
      • Right Side Layouts
    • Sliders
      • Responsive Nivo Slider
      • Responsive Flex Slider
      • Responsive Bx Slider
    • Accordion
    • User Interfaces
    • CSS3 Animation Content
    • Carousel
    • Portfolio
  • Pages
    • Left Side Pages
    • Right Side Pages
    • About Us
    • Meet the Team
    • Coming Soon
    • Pricing Table
    • Services
    • Career
    • FAQ
    • Our Office
    • 404 Page
    • Blank Pages
  • Containers
    • Turquoise Container
    • Chocolate Container
    • Dodgerblue Container
    • Green Container
    • Aqua Blue Container
    • Olivegreen Container
    • Orange Container
    • Purple Container
    • Red Container
    • Slategray Container
    • Brown Container
    • Limegreen Container
  • Contact Us

Select the search type
  • Site
  • Web
Search
Images
Features / Bootstrap Componentes / Images

Images

Add classes to an <img> element to easily style images in any project.

PostA PostB PostC
<img src="/Portals/_default/..." class="img-rounded">
<img src="/Portals/_default/..." class="img-circle">
<img src="/Portals/_default/..." class="img-polaroid">

Heads up! .img-rounded and .img-circle do not work in IE7-8 due to lack of border-radius support.

Thumbnails Grids of images, videos, text, and more

Default thumbnails

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

Highly customizable

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.

    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

Why use thumbnails

Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.

Simple, flexible markup

Thumbnail markup is simple—a ul with any number of li elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.

Uses grid column sizes

Lastly, the thumbnails component uses existing grid system classes—like .col-md-2 or .col-md-3—for control of thumbnail dimensions.

Markup

As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:

<ul class="thumbnails">  <li class="col-md-4">    <a href="#" class="thumbnail">      <img data-src="/portals/9/holder.js/300x200" alt="">    </a>  </li>  ...</ul>

For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:

<ul class="thumbnails">  <li class="col-md-4">    <div class="thumbnail">      <img data-src="/portals/9/holder.js/300x200" alt="">      <h3>Thumbnail label</h3>      <p>Thumbnail caption...</p>    </div>  </li>  ...</ul>
Copyright 2025 by Revolution : Terms Of Use : Privacy Statement