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”
<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:
- Bootstrap Documentation
- Smiley SVG icons
- Shadow in Bootstrap
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses
are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!