Circle Image in Bootstrap
To make a rounded image, we can use the bootstrap “rounded-circle” class. Let’s dive into the steps involved in creating a circle image.
Steps to convert image to a circle
Step 1: Add Bootstrap to your project
You can either download the Bootstrap files and link them to your HTML file or use a Bootstrap CDN link to include Bootstrap. You can link Bootstrap using the CDN, like:
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css">
<title>Circle Image in Bootstrap</title>
</head>
<body>
<!-- Your HTML content goes here -->
</body>
</html>
Step 2: Add an image element
Next, you need to add an image element to your HTML content. To add an image to HTML, you need to use the <img> tag and give your image file path in the “src” attribute.
<img src="image.jpg" width="100%">
Step 3: Apply the “rounded-circle” class
To make the image circular, you need to set the class name “rounded circle” to the <img>
tag. It’s used to create a rounded circle image.
<img src="image.jpg" width="100%" class="rounded circle">
Output:
See the output, the image is converted into a circle shape automatically.