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:
<!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
filter_none
Output:
References:
