Open In App
Related Articles

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

Improve Article
Save Article
Like Article

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: 


<!DOCTYPE html>
    <meta charset="utf-8"/>
    <meta name="viewport"
    <title>JS Bin</title>
    <link rel="stylesheet" href=
        img {
            width: 100px;
            height: 100px;
            margin-top: 50px;
            float: left;
            margin-left: 10px;
    <div><img class="shadow-lg rounded-circle" src=
        alt="image1" />
    <div><img class="shadow-lg rounded-circle" src=
    <div><img class="shadow-lg rounded-circle" src=

Output: References:

  1. Bootstrap Documentation
  2. Smiley SVG icons
  3. 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!

Last Updated : 05 May, 2022
Like Article
Save Article
Similar Reads
Complete Tutorials