• Call Us: 0111 222 333
  • Mail: info@domain.com
Professional DNN Responsive Theme
Professional DNN Responsive Theme
Go to...
  • Home
    • BoxedVersion
      • BoxedInner Page
    • 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
    • Home Version 11
    • Home Version 12
  • Colors
    • Blue Colors
      • CadetBlue
      • Aqua Blue
      • Dodger Blue
      • Slategrey
      • MidnightBlue
    • Turquoise
    • Chocolate
    • Green
    • Olive Green
    • Orange
    • Purple
    • Red
    • Brown
    • Lime Green
    • Pink
  • Menu Option
    • Mega Menu
      • Sub Menu 01
      • Sub Menu 02
      • Sub Menu 03
    • Standard Menu
      • Sub Menu 01
      • Sub Menu 02
      • Sub Menu 03
    • Left Side Menu
      • Sub Menu 01
      • Sub Menu 02
      • Sub Menu 03
  • Sliders
    • Touch Layer Sliders
      • Slider Example 01
      • Slider Example 02
      • Slider Example 03
    • Responsive Nivo Slider
    • Responsive Flex Slider
    • Responsive Bx Slider
  • Features
    • 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
    • Headers
      • Header1 - RightMenu
      • Header2 - CenterMenu
      • Header3 - LeftMenu
      • Header4 - NoTopbar
      • Header5 - Optional
      • Header6 - Optional
      • Header7 - Optional
    • Pane Layouts
      • Home Page Layouts
      • Left Side Layouts
      • Right Side Layouts
    • Footers
      • Footer Version 1
      • Footer Version 2
      • Footer Version 3
      • Footer Version 4
      • Footer Version 5
      • Footer Version 6
    • 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
    • Blue Containers
      • CadetBlue Container
      • Aqua Blue Container
      • Dodgerblue Container
      • Slategray Container
      • MidnightBlue Container
    • Turquoise Container
    • Chocolate Container
    • Green Container
    • Olivegreen Container
    • Orange Container
    • Purple Container
    • Red Container
    • Brown Container
    • Limegreen Container
    • Pink Container
  • Contact Us
  • Home
    • BoxedVersion
      • BoxedInner Page
    • 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
    • Home Version 11
    • Home Version 12
  • Colors
    • Blue Colors
      • CadetBlue
      • Aqua Blue
      • Dodger Blue
      • Slategrey
      • MidnightBlue
    • Turquoise
    • Chocolate
    • Green
    • Olive Green
    • Orange
    • Purple
    • Red
    • Brown
    • Lime Green
    • Pink
  • Menu Option
    • Mega Menu
      • Sub Menu 01
      • Sub Menu 02
      • Sub Menu 03
    • Standard Menu
      • Sub Menu 01
      • Sub Menu 02
      • Sub Menu 03
    • Left Side Menu
      • Sub Menu 01
      • Sub Menu 02
      • Sub Menu 03
  • Sliders
    • Touch Layer Sliders
      • Slider Example 01
      • Slider Example 02
      • Slider Example 03
    • Responsive Nivo Slider
    • Responsive Flex Slider
    • Responsive Bx Slider
  • Features
    • 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
    • Headers
      • Header1 - RightMenu
      • Header2 - CenterMenu
      • Header3 - LeftMenu
      • Header4 - NoTopbar
      • Header5 - Optional
      • Header6 - Optional
      • Header7 - Optional
    • Pane Layouts
      • Home Page Layouts
      • Left Side Layouts
      • Right Side Layouts
    • Footers
      • Footer Version 1
      • Footer Version 2
      • Footer Version 3
      • Footer Version 4
      • Footer Version 5
      • Footer Version 6
    • 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
    • Blue Containers
      • CadetBlue Container
      • Aqua Blue Container
      • Dodgerblue Container
      • Slategray Container
      • MidnightBlue Container
    • Turquoise Container
    • Chocolate Container
    • Green Container
    • Olivegreen Container
    • Orange Container
    • Purple Container
    • Red Container
    • Brown Container
    • Limegreen Container
    • Pink 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.

Professional, flexible markup

Thumbnail markup is Professional—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/10/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/10/holder.js/300x200" alt="">      <h3>Thumbnail label</h3>      <p>Thumbnail caption...</p>    </div>  </li>  ...</ul>
Copyright 2025 by Professional : Terms Of Use : Privacy Statement
  • Register
Login