×

Html & Html5

The World's best Software Development Study Portal

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

scenery


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

scenery

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

scenery



Here I get our images in the form of thumbnail.








Bootstrap 4 training insitute | Best IT Training classes in Gurgaon | Web Designing Training Institute