Loading...

Images View all kinds of Images examples below.

Images

Use the markups below to add all kind of styles to images.

Basic

Add the .img-rounded or .img-circle CSS classes to images to create rounded corners. You can use the .img-responsive CSS class to make an image inherit the width of its parent. To make an image inherit both the width and height, you need to use the .img-full CSS class.

Basic

Add the .img-bordered CSS class to images to create bordered images. You can use the border color CSS helper classes to style the border color.

Thumbnails

Add the .img-thumbnail to an image to add a small border to it. Use the .thumbnail CSS class on links that contain images to add an active hover class.

Hover with text

Use the markup below to create image boxes with text visible only on hover. Use the CSS helper classes to style the hover content.

Common styles

Framework inherited

The core color helpers can be applied to all kind of elements from buttons to icons, headers, headings, etc. They do not change when you switch to a different theme from the same template.

Theme inherited

These are the template default color schemes and are used site wide to consistently style common elements. For the primary color you must add .bg-primary and for the secondary color you must add .ui-state-default. Note that theme two styles change based on what color scheme you choose for your template.

Hover with overlay

Use the markup below to create image boxes with hover overlays and text.

Hover with buttons

Use the markup below to create image boxes with overlays and buttons visible only on hover.

Hover with icons

Use the markup below to create image boxes with overlays and icons visible only on hover.

Hover with content

Use the markup below to create image boxes with different content animations on hover.

Example title

Lorem ipsum dolor sic amet dixit tu

View details

Example title

Lorem ipsum dolor sic amet dixit tu

View details

Example title

Lorem ipsum dolor sic amet dixit tu

View details

Example title

Lorem ipsum dolor sic amet dixit tu

View details

Hover with toolbar

Use the markup below to create image boxes with overlays and icons visible only on hover.

Rounded corners

Use the markup below to create rounded corners image boxes with overlays and icons visible only on hover.

Online
  • Grace Padilla

    On the other hand, we denounce...

  • Carl Gamble

    Dislike men who are so beguiled...

  • Michael Poole

    Of pleasure of the moment, so...

  • Bill Green

    That they cannot foresee the...

  • Cheryl Soucy

    Pain and trouble that are bound...

Idle
  • Jose Kramer

    Equal blame belongs to those...

  • Dan Garcia

    Weakness of will, which is same...

  • Edward Bridges

    These cases are perfectly simple...

Offline
  • Randy Herod

    In a free hour, when our power...

  • Patricia Bagley

    when nothing prevents our being...

Cloud status
Latest transfers
Tasks for today
Pending notifications New