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:
- How to place two div side-by-side of the same height using CSS?
- How to overlay one div over another div using CSS
- How to copy the content of a div into another div using jQuery ?
- How to center a div within another div?
- Bootstrap 5 alpha | Icons Library
- How to float three div side by side using CSS?
- How to place a div inside an iframe for IE ?
- How to clear all div's content inside a parent div ?
- How to change the color of icons using Material-UI in ReactJS?
- How to place button in top Right corner using bootstrap?
- How to place table text into center using Bootstrap?
- How to force tab-navigation to stay in place using Bootstrap ?
- How to place two input box next to each other using Bootstrap 4 ?
- CSS | Icons
- How to target all Font Awesome icons and align them center?
- ReactJS | Icons
- Materialize CSS | Icons
- How to use font-awesome icons from node-modules?
- How to Set full height in box-inner div using bootstrap 4 ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. 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.