Images

Images shapes

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

image

.img-rounded

image

.img-circle

image

.img-thumbnail

Image sizes

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

image

.thumb-lg

image

.thumb-md

image

.thumb-sm

Images Responsive

Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%;, height: auto; and display: block; to the image so that it scales nicely to the parent element.

image

Thumbnail custom content

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

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.

ButtonButton

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.

ButtonButton

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.

ButtonButton

Default media object

The default media displays a media object(images,video,audio) to the left or right of a content block.

64x64

Media heading

Cras sit amet nibh libero,in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio,vestibulum in vulputate at,tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
64x64

Media heading

Cras sit amet nibh libero,in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio,vestibulum in vulputate at,tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
64x64

Nested media heading

Cras sit amet nibh libero,in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio,vestibulum in vulputate at,tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media heading

Cras sit amet nibh libero,in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio,vestibulum in vulputate at,tempus viverra turpis.
64x64
64x64

Media heading

Cras sit amet nibh libero,in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio,vestibulum in vulputate at,tempus viverra turpis.
64x64

Media alignment

The images or other media can be aligned top,middle,or bottom. The default is top aligned.

64x64

Top aligned media

Cras sit amet nibh libero,in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio,vestibulum in vulputate at,tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes,nascetur ridiculus mus.

64x64

Middle aligned media

Cras sit amet nibh libero,in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio,vestibulum in vulputate at,tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes,nascetur ridiculus mus.

64x64

Bottom aligned media

Cras sit amet nibh libero,in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio,vestibulum in vulputate at,tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes,nascetur ridiculus mus.

Media list

With a bit of extra markup,you can use media inside list(useful for comment threads or articles lists).

  • 64x64

    Media heading

    Cras sit amet nibh libero,in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio,vestibulum in vulputate at,tempus viverra turpis.

    64x64

    Nested media heading

    Cras sit amet nibh libero,in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio,vestibulum in vulputate at,tempus viverra turpis.
    64x64

    Nested media heading

    Cras sit amet nibh libero,in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio,vestibulum in vulputate at,tempus viverra turpis.
    64x64

    Nested media heading

    Cras sit amet nibh libero,in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio,vestibulum in vulputate at,tempus viverra turpis.