Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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


Last Updated : 05 May, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads