What is the use of img-fluid class in Bootstrap ?
In Bootstrap, the img-fluid is a Bootstrap class that makes images responsive by setting their maximum width to 100% of the parent container’s width. This ensures that images dynamically adjust their size according to the screen or viewport width, maintaining their aspect ratio without overflowing their container. It simplifies the process of creating responsive images in web development.
Usage of img-fluid Bootstrap class
- It can adjust the size of the image dynamically according to changing parent size.
- Used to make web designs responsive.
- Prevents image from overflowing from the container.
- Maintains the aspect ratio of the image automatically.
Approach
- In the HTML document, Bootstrap is integrated using a link tag, importing the Bootstrap CSS file from a CDN.
- Within the body, a div element with classes “container” and “text-center” ensures that the content within it is horizontally centered on the page.
- Inside the container div, an h1 heading element and an img element are present.
- The h1 heading element contains text describing the purpose of the example, while the img element displays the image with the specified width and the Bootstrap class “img-fluid” for responsive scaling.
Example: The code demonstrates the usage of Bootstrap’s img-fluid class for creating responsive images within a centered container.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Responsive Image Example</title>
<link href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<div class="container text-center">
<h1>Responsive Image using img-fluid
Bootstrap class
</h1>
<img id="responsiveImg" width="1000px" src=
"https://media.w3wiki.net/gfg-gg-logo.svg"
class="img-fluid"
alt="Responsive Image">
</div>
</body>
</html>
Output:
Output
Contact Us