.img-circle class
The shape of the image is made into a circle by the .img-circle class. (Rounded corners are not supported by IE8.)
<!DOCTYPE html>
<html>
<head>
<!-- Link Bootstrap CSS -->
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Link Bootstrap JS and JQuery -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<h3>.img-circle class </h3>
<p>Circle</p>
<img src=
"https://media.w3wiki.org/wp-content/uploads/20240612085712/image.png"
class="img-circle"
alt="Responsive Image"
width="307"
height="240" />
</div>
</body>
</html>
Output:
Responsive images in Bootstrap with Examples
Responsive images in Bootstrap adjust automatically to fit different screen sizes, Bootstrap provides utilities to create responsive images that adapt to various screen sizes. By applying the img-fluid class, images scale proportionally within their parent containers, ensuring optimal viewing on different devices.
The different classes available in Bootstrap for images are explained below:
Table of Content
- img-responsive class
- .img-fluid class:
- .img-rounded class:
- .img-circle class:
- .img-thumbnail class: