Images

  1. Home
  2. Basic UI
  3. Images

Image Style

Image Shape

In <img>,use different class like .img-rounded , .img-circle , .img-default to style image.

<img class="img-rounded">

Images8

<img class="img-circle">

Images6

<img class="img-default">

Images7

Custom Content

Anytime you need to display a piece of content—like an image—with an optional caption. Use .caption class.

Images1

Nature

Aliquet augue, sed ipsum non hendrerit urna a etiam class donec. Ultrices tempor sapien nunc fames ante feugiat non morbi. Ornare enim ipsum mus natoque sociis vivamus, dapibus, nisi ridiculus.

Image Read

Images2

Nature

Gravida dui eros netus arcu metus sociis integer. Quisque orci mi mauris condimentum imperdiet habitasse libero penatibus magnis class Habitant pulvinar pellentesque dapibus porta.

Image Read

Images3

Nature

Conubia curae;. Habitant amet dignissim duis commodo convallis sem. Class laoreet Luctus ligula mi neque tincidunt quam, eleifend nisl. Lacinia lacus proin nec aenean.

Image Read

Thumbnails-default

The .thumbnail class shapes the image to a thumbnail:

Images1
Images2
Images3
Images4

Aligning images

Align images with the .pull-left, .center-block or .pull-right.

Images7
Images8
Images6

Images - Responsive

Create responsive images by adding an .img-responsive class to the img tag. It applies display: block; and max-width: 100%; and height: auto; to the image:

Images5