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

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

References:

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



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.