Image Shapes
In Bootstrap there we can define the shapes of our images by following ways:-
1. The .rounded class that adds border in the image itself.
Let’s understand them by this program
<!DOCTYPE html>
<html lang="en">
<head>
<title> bootstrap 5 Example</title>
<link href="https://cdn.jsdelivr.net/npm/
[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h2>Rounded Corners</h2>
<img src="pythonimage/scenery.jpg" class="rounded" alt="scenery" width="400" height="236">
</div>
</body>
</html>
Output of this Program
bootstrap 5 Example
Rounded Corners
So in our image we get border itself by .rounded class
2. The .rounded-circle class changes the shape of the image into circle .
Let’s understand them by this program
<!DOCTYPE html>
<html lang="en">
<head>
<title> bootstrap 5 Example</title>
<link href="https://cdn.jsdelivr.net/npm/
[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h2>Rounded Circle </h2>
<img src="pythonimage/scenery.jpg" class="rounded-circle" alt="scenery" width="400" height="236">
</div>
</body>
</html>
Output of this Program
bootstrap 5 Example
Rounded Circle
So here we get our image in the form of circle.
3. The .img-thumbnail class changes the images shape to the thumbnail.
Let’s understand them by this program
<!DOCTYPE html>
<html lang="en">
<head>
<title> bootstrap 5 Example</title>
<link href="https://cdn.jsdelivr.net/npm/
[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h2> Thumbnail</h2>
<img src="pythonimage/scenery.jpg" class="img-thumbnail" alt="scenery" width="400" height="236">
</div>
</body>
</html>
Output of this Program
bootstrap 5 Example
Thumbnail
Here I get our images in the form of thumbnail.