Images


These components are used to display images on websites. They can be made responsive and come in different shapes and sizes as shown below.

Responsive Images


Images can be made responsive - they expand upto the width of the container they are in. Use the class img-responsive in the parent container. There are two variants - circular and squared. Use classes round-img or squared-img as per requirement.
responsive image - circular
responsive image - squared



responsive image - squared

Squared Images


Images can be square-shaped using class sq-img along with the preferred sizes - small, medium or large.


squared images

Circular Images


Images can be circular-shaped. Add the class img-round along with the preferred sizes - small, medium or large.
small avatar medium avatar large avatar


small avatar