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.
<!-- add class="responsive-img" along with the preferred shape-->
<div class="img-responsive squared-img">
<img src="source path" alt="responsive image - squared">
</div>
Squared Images
Images can be square-shaped using class
sq-img along with the
preferred sizes - small, medium or large.
<!-- add class="sq-img" along with the preferred size-->
<img src="source path" class="sq-img small" alt="squared images">
Circular Images
Images can be circular-shaped. Add the class
img-round along
with the preferred sizes - small, medium or large.
<!-- add class="img-round" along with the preferred size-->
<img src="source path" class="img-round small" alt="small avatar">