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.
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
<img class = "rounded-circle" src = "..." alt = "image">
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: