×

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 4 Example</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>

<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="scenery.jpg" class="rounded" alt="scenery" width="304" height="236">

</div>

</body>

</html>

Output of this Program



bootstrapimage



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 4 Example</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>

<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="scenery.jpg" class="rounded-circle" alt="scenery" width="304" height="236">

</div>

</body>

</html>

Output of this Program


bootstrapimage


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 4 Example</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>

<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="scenery.jpg" class="img-thumbnail" alt="scenery" width="304" height="236">

</div>

</body>

</html>

Output of this Program


bootstrapimage




Here I get our images in the form of thumbnail.








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