Easy Way to Create Circle Image Using Bootstrap

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:

bootstrap image circleSee the output, the image is converted into a circle shape automatically.

Leave a Reply