Circle Image
The .rounded-circle class is used to create the circle shape image.
Syntax:
<img src="image_source" class="rounded-circle" ...>
Example: In this example we are using Bootstrap 4’s rounded-circle class to render a circular image, offering a visually distinct presentation for the image element.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Images</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body style="text-align:center;">
<div class="container">
<h2>Circle Image</h2>
<img class="rounded-circle"
src=
"https://media.w3wiki.org/wp-content/uploads/20240611122859/
responsiveImageOutput.png"
alt="Responsive image"
width="467"
height="340" />
</div>
</body>
</html>
Output:
Bootstrap 4 Images
Bootstrap 4 provides classes to style images responsively, including responsive images that automatically adjust the size based on screen width, image shapes such as rounded or circular, and image thumbnails with optional borders and captions, facilitating flexible and attractive image layouts.
The different classes available in Bootstrap for images are explained below:
Table of Content
- Responsive Images
- Rounded Corners Image
- Circle Image
- Thumbnail Image
- Aligning Image
- Centered Image