Images in Bermuda

Nowadays, there hard to find a webpage which has no image on it at all. So, image is a fundamental component of webpage. But it is very hard to manage width and height of image while building responsive UI.
That's why, Bermuda provides you the images of different sizes as well as responsive images for different sized devices.

Different Sized Images.

Bermuda provides three different sized images. With the classname img-sm we get the image with size of 10rem X 10rem, using img-md we get the image with size of 15rem X 15rem and with img-lg classname we get the image of size 20rem X 20rem. 

                    
                      <img src="./assets/avatar.png" class="img-sm" alt="small-image">
                      
                      <img src="./assets/avatar.png" class="img-md" alt="medium-image">
                      
                      <img src="./assets/avatar.png" class="img-lg" alt="large-image">

                      <img src="./assets/avatar.png" class="img-md  border-rounded-full" alt="medium-image-rounded">
Note: For rounded images you can use the utility classes of border-radius. Here for demo I have used the utility class border-rounded-full

Responsive Image

Bermuda also provides the class for responsive image. For making your image responsive use the classname img-responsive .
Note : To see the responsiveness of the following image resize your window.

responsive-image 
                    
                      <img src="./assets/avatar.png" class="img-responsive" alt="responsive-image">

So, these are the pre-defined classes for images. You can absolutely change them as per your need.

  Card
Inputs