Images

Image components are used, when you need to display pictures.

Square Images

You can change image size using pre-defined classes given below

'img-xsm-square': 32px X 32px

'img-sm-square': 48px X 48px

'img-md-square': 100px X 100px

'img-lg-square': 160px X 160px

'img-xl-square': 256px X 256px

'img-xxl-square': 416px X 416px

'img-xxxl-square': 672px X 672px

example of 'img-lg-square' : 100px X 160px

You can directly use below code, by providing your image location in 'src'.

Round Images

You can change image size using pre-defined classes given below

'img-xsm-round': 32px X 32px

'img-sm-round': 48px X 48px

'img-md-round': 100px X 100px

'img-lg-round': 160px X 160px

'img-xl-round': 256px X 256px

'img-xxl-round': 416px X 416px

'img-xxxl-round': 672px X 672px

example of 'img-lg-round' : 160px X 160px

You can directly use below code, by providing your image location in 'src'.

Full Width Image - Responsive

Full-width responsive image components are used to display Images on different size screens. It expands to cover the container it is present in.

Note : Resize the browser window, to see the responsive property.

You can directly use below code, by providing your image location in 'src'.