Artificial DNN Responsive Theme
Login
en-USfr-FR
  • Call Us: 0111 222 333
  • Mail: info@domain.com
  • Home
    • Home Version 1
    • Home Version 2
    • Home Version 3
    • Home Version 4
    • Home Version 5
    • Home Version 6
    • Home Paralex 7
    • Home Version 8
    • Home Version 9
    • Home Version 10
  • Colors
    • Turquoise
    • DodgerBlue
    • Green
    • Lime Green
    • Olive Green
    • Aqua Blue
    • Stage Gray
    • Orange
    • Brown
    • Red
    • Chocolate
    • Purple
  • Mega Menu
    • BoxedVersion
    • BoxedInner Page
    • Demo Menu
  • Features
    • Headers
      • Header1 - LeftMenu Right Search
      • 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
    • Pane Layouts
      • Home Page Layouts
      • Left Side Layouts
      • Right Side Layouts
    • Sliders
      • Responsive Nivo Slider
      • Responsive Flex Slider
      • Responsive Bx Slider
    • Others
      • Video Shortcode
      • Promo Box
      • Highlighted Text
      • Dividers & Gaps
      • Media object
      • Teasers
    • Accordion
    • User Interfaces
    • CSS3 Animation Content
    • Carousel
    • Portfolio
    • Testimonials
    • Font Awesome Icons
  • 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
    • Lime 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 Version 8
    • Home Version 9
    • Home Version 10
  • Colors
    • Turquoise
    • DodgerBlue
    • Green
    • Lime Green
    • Olive Green
    • Aqua Blue
    • Stage Gray
    • Orange
    • Brown
    • Red
    • Chocolate
    • Purple
  • Mega Menu
    • BoxedVersion
    • BoxedInner Page
    • Demo Menu
  • Features
    • Headers
      • Header1 - LeftMenu Right Search
      • 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
    • Pane Layouts
      • Home Page Layouts
      • Left Side Layouts
      • Right Side Layouts
    • Sliders
      • Responsive Nivo Slider
      • Responsive Flex Slider
      • Responsive Bx Slider
    • Others
      • Video Shortcode
      • Promo Box
      • Highlighted Text
      • Dividers & Gaps
      • Media object
      • Teasers
    • Accordion
    • User Interfaces
    • CSS3 Animation Content
    • Carousel
    • Portfolio
    • Testimonials
    • Font Awesome Icons
  • 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
    • Lime 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/5/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/5/holder.js/300x200" alt="">      <h3>Thumbnail label</h3>      <p>Thumbnail caption...</p>    </div>  </li>  ...</ul>
Copyright 2025 by Artificial : Terms Of Use : Privacy Statement