Bootstrap Images

Bootstrap supports for images. There are three classes in Bootstrap that can be used to apply some simple style to the images.

Bootstrap Image-rounded Example

The class .img-rounded is used to add rounded corners to an image ( IE8 does not support rounded corners).

Example -

Bootstrap Image-circle Example

The class .img-circle is used to shape the image to a circle (IE8 does not support rounded corners).

Example -

Bootstrap Thumbnail Image

The class .img-thumbnail is used to shape an image to a thumbnail.

Example -

Bootstrap Responsive images

The responsive images can adjust themselves automatically to fit the size of screen. You can create responsive images by adding an .img-responsive class to the <img> tag. The image will then scale nicely to the parent element.

The .img-responsive class applies display: block; and max-width: 100%; and height: auto; to the image.

Example -

Bootstrap Responsive Videos / Embeds

In Bootstrap, you can also add videos and scale them properly on any devices. The class .embed-responsive-item is used to create a responsive video. Class can be applied directly to <iframe>, <embed>, <video>, and <object> elements.

Example -