How to place SVG icons on a round circle side by side to another div using Bootstrap?

Last Updated : 05 May, 2022

Bootstrap Icons are SVGs, so they scale quickly and easily and can be styled with CSS. Approach: We can place the SVG icons and give them the shape of a circle. This will make the SVG icons appear to be in a circular shape. This can be achieved using a Bootstrap class called “rounded-circle”

Syntax:

<img class = "rounded-circle" src = "..." alt = "image">

Example: Let us try to place three SVG icons on a circle that appears on the same line (side by side as required).

To make sure all the icons appear side by side, we have to include float: left; inside the CSS for <img> tag.

Additionally (optionally), we also add the Bootstrap class “shadow-lg”, to get shadow beneath each SVG icon to make it look good.

Example: place this <img> tag inside a <div> tag as shown below:

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport"
        content="width=device-width"/>
    <title>JS Bin</title>
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
        integrity=
"sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
        crossorigin="anonymous"/>
    <style>
        img {
            width: 100px;
            height: 100px;
            margin-top: 50px;
            float: left;
            margin-left: 10px;
        }
    </style>
</head>
 
<body>
    <div><img class="shadow-lg rounded-circle" src=
"https://img.icons8.com/emoji/2x/smiling-face.png"
        alt="image1" />
    </div>
    <div><img class="shadow-lg rounded-circle" src=
"https://img.icons8.com/emoji/2x/slightly-smiling-face.png"
        alt="image2"/>
    </div>
    <div><img class="shadow-lg rounded-circle" src=
"https://img.icons8.com/emoji/2x/smiling-face-with-smiling-eyes.png"
        alt="image3"/>
    </div>
</body>
</html>