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