Image

An image is a graphic representation of something. Images can be made responsive (so that they don't jump out of its parent container), have rounded corners or can look like a circle.

@import url(https://vera-ui.netlify.app/styles/image.css)

<link rel="stylesheet" href="https://vera-ui.netlify.app/styles/image.css">

Responsive Images

Images in Bootstrap are made responsive with .img-responsive. max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.

<img src="..." class="img-responsive" alt="...">

Rounded Corners

The .img-rounded class adds rounded corners to an image

<img src="..." class="img-rounded" alt="...">

Circle Images

The .img-circle class shapes the image to a circle

<img src="..." class="img-circle" alt="...">