How to Make an Image Rounded in Bootstrap ?
In Bootstrap, you can make an image rounded by applying the rounded class to it. This class sets the border-radius property, giving the image rounded corners for a softer and more visually appealing appearance.
Below are the approaches to make an image rounded in Bootstrap:
Table of Content
- Using rounded-circle class
- Using rounded-pill class
Using rounded-circle class
In this approach, we are using the Bootstrap 5 utility class rounded circle to make a circular shape for the image. This class applies rounded borders to the image, creating a visually rounded appearance without the need for custom CSS.
Syntax:
<img src="img" class="rounded-circle mt-4">
Example: Implementation to make an image rounded.
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
rel="stylesheet">
<title>Rounded Image</title>
</head>
<body class="bg-light">
<div class="container mt-5 text-center">
<h3>Using rounded-circle class</h3>
<img src=
"https://media.w3wiki.net/wp-content/uploads/20190802021607/Beginner14.png"
class="rounded-circle mt-4"
alt="Circular Image"
width="200">
</div>
</body>
</html>
Output:
Using rounded-pill class
In this approach, the Bootstrap 5 class rounded-pill is used to give the image rounded pill-shaped borders, creating a distinctive rounded appearance. The use of mx-auto and d-block classes ensures horizontal centering of the image within the container. The mt-3 class adds top margin for proper spacing.
Syntax:
<img src="img" class="rounded-pill mt-4">
Example: Implementation to make an image rounded.
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js">
</script>
<title>Rounde Image</title>
</head>
<body class="bg-light">
<div class="container mt-5 text-center">
<h3>Using rounded-pill class</h3>
<img src=
"https://media.w3wiki.net/wp-content/cdn-uploads/20220630132824/HTML-Full-Form.jpg"
class="rounded-pill mt-3 mx-auto d-block"
width="600"
alt="Rounded Pill Image">
</div>
</body>
</html>
Output:
Contact Us