Bootstrap Images

Here we will study about how what Bootstrap 4 has in store for the image elements of your web pages.

Bootstrap 4 images Shapes

Using Bootstrap, the images can be rendered in the following three shapes:

Rounded Corners:
Circle
Thumbnail

Out of these three, the first two are not supported by IE8 or earlier versions

Bootstrap Rounded Corners images

For rounded corners, you can use the .rounded class with your <img> tag.

For example:

Try It

Circle images in bootstrap

Adding the .rounded-circle class to <img> the tag will shape your image into a circle.

For example:

Try It

Thumbnail images bootstrap

The thumbnail shape can be achieved using the .img-thumbnail class.

For example:

Try It

Bootstrap images responsive

The sizes of the images and screens might not go hand-in-hand more often than you can predict.

We need to have responsive images that can automatically adjust as per the size of the screen.

We can make the images responsive using the class. .img-fluid class with the <img> tag.

Now, the image will, nicely, scale to the parent element.

When using .img-fluid class the display is automatically set to block and max-width to 100%. Similarly, height is set to auto as well.

See the code below for example:

Try It

Bootstrap Images Gallery

The image gallery can be created by using Bootstrap’s grid system along with the .thumbnail class.

The code below illustrated the same:


 
         
            
               
               
                  Image One
               
            
         
         
            
               
               
                  Image Two
               
            
         
         
            
               
               
                  Image Three

Try It

Bootstrap Responsive Embeds

Not only the images but the other embedded media like videos and slideshows can also be made responsive to scale properly on any device.

For this, you need to add the class embed-responsive to any <div> item.

You will also need to add the .embed-responsive-item to your <iframe>, <embed>, <video>, and <object> elements.

Try It

What is aspect ratio?

The aspect ratio of any image can be described as the proportional relationship between the image’s width and height.

The most common video aspect ratios we have are 4:3 which was a universal video format of the 20th century and 16:9 that is commonly known for the HD television.

We have two classes for these aspect ratios in Bootstrap:

embed-responsive embed-responsive-4by3
embed-responsive embed-responsive-16by9

Bootstrap <img> Classes

Bootstrap has the following classes for styling your image elements

.rounded: To add rounded corners to the image
.rounded-circle: To shapes the image into a circle
.img-thumbnail: To shape the image into a thumbnail
.img-fluid: To make the image responsive make it scale nicely to the parent element.