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.

HTML

<!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.geeksforgeeks.org/wp-content/uploads/20190802021607/geeks14.png"
            class="rounded-circle mt-4"
            alt="Circular Image" 
            width="200">
    </div>
</body>

</html>

Output:

Rounded-image-in-Bootstrap Example 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.

HTML

<!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.geeksforgeeks.org/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:

Rounded-image-in-Bootstrap Example Output

Article Tags :

Bootstrap

Web Technologies

Bootstrap-Questions