Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App
geeksforgeeks
Browser
Continue

Related Articles

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

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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=
        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=
        alt="image1" />
    </div>
    <div><img class="shadow-lg rounded-circle" src=
        alt="image2"/>
    </div>
    <div><img class="shadow-lg rounded-circle" src=
        alt="image3"/>
    </div>
</body>
</html>

Output: References:

  1. Bootstrap Documentation
  2. Smiley SVG icons
  3. Shadow in Bootstrap

My Personal Notes arrow_drop_up
Last Updated : 05 May, 2022
Like Article
Save Article
Similar Reads
Related Tutorials