Open In App

Bootstrap 5 Images Responsive images

Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5 Responsive images are used to resize the images according to their parent element and screen sizes. It means, the size of the image should not overflow its parent element and will grow and shrink according to the change in the size of its parent without losing its aspect ratio.

Responsive images used Class:

  • .img-fluid: This class is used to create the responsive image in respect of its parent element.

Syntax:

<img src="..." class="img-fluid" alt="...">

 

Example 1: In this example, we will use .img-fluid class to create the responsive image.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Bootstrap 5 Images Responsive Images</title>
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
        crossorigin="anonymous">
    </script>
</head>
  
<body>
    <div class="container text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
  
        <h2>Bootstrap 5 Images Responsive Images</h2>
  
        <img src=
            class="img-fluid" alt="GFG">
    </div>
</body>
  
</html>


Output:

 

Example 2: In this example, we will use .img-fluid and .rounded-circle classes to create a responsive circular image.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Bootstrap 5 Images Responsive images</title>
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
        crossorigin="anonymous">
    </script>
</head>
  
<body>
    <div class="container text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
  
        <h2>Bootstrap 5 Images Responsive images</h2>
  
        <img src=
            class="img-fluid rounded-circle" alt="GFG">
    </div>
</body>
  
</html>


Output:

 

Reference: https://getbootstrap.com/docs/5.0/content/images/#responsive-images



Last Updated : 18 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads