JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
          <div class="row">
            <div class="hidden-xs hidden-sm">
              <div class="center-block" id="divCircle">    
                  <div id="middleBubble">&nbsp;</div>
                  
                  <img class="img-circle" src="img/circle/home-all-icon-off.png" id="all" data-bubble1="all:" data-bubble2="discounted lab work<br />on-site">
                  
                  <img class="img-circle" src="img/circle/home-cover-icon-off.png" id="cover" data-bubble1="Lorem cover<br />personalized<br />lorem:" data-bubble2="Lorem Ipsum,<br />Ipsim Lorem, lore, lorem"> 
                  
                  <img class="img-circle" src="img/circle/home-diy-icon-off.png" id="diy" data-bubble1="diy:" data-bubble2="Lorem Ipsum,<br />Ipsim Lorem, lore, lorem">
                  
                  <img class="img-circle" src="img/circle/home-marketing-icon-off.png" id="marketing" data-bubble1="marketing:" data-bubble2="Lorem Ipsum,<br />Ipsim Lorem, lore, lorem">
                  
                  <img class="img-circle" src="img/circle/home-other-icon-off.png" id="other" data-bubble1="other plans:" data-bubble2="Lorem Ipsum,<br />Ipsim Lorem, lore, lorem">
                  
                  <img class="img-circle" src="img/circle/home-special-icon-off.png" id="special" data-bubble1="special for you:" data-bubble2="Lorem Ipsum,<br />Ipsim Lorem, lore, lorem">
                  
                  <img class="img-circle" src="img/circle/home-vip-icon-off.png" id="vip" data-bubble1="you are Vip:" data-bubble2="Lorem Ipsum,<br />Ipsim Lorem, lore, lorem">
                  
                  <img class="img-circle" src="img/circle/home-designe-icon-off.png" id="designe" data-bubble1:"designe from us:" data-bubble2="Lorem Ipsum,<br />Ipsim Lorem, lore, lorem">    
              
              </div>
            </div>  
          </div>    
        </div>

CSS

/**
 *
 * Position icons into circle (SO)
 * 
 */

 
#mainContainer{
    width: 100%;
    text-align: center;
}

#divCircle {
    
    width: 485px;
    height: 485px;
    position: relative;

}

#divCircle img{
    position: absolute;
    width: 18%;
    height: 18%;
}

#middleBubble {
    position: absolute;
   top:33%;
    background: url(../img/circle/9.png);
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    color: #252525;
    font-size: 1em;
    text-align:center; 
    height: 50%;
    width: 90%;
    margin: auto;
    position: absolute;
    
}


    

}

#middleBubble b{
    font-size: 1em;
}

#middleBubble p{
    margin: 2em;
}

JavaScript

$(document).ready(function(){
			//Center the "info" bubble in the  "circle" div
			var divTop = ($("#divCircle").height() - $("#middleBubble").height())/2;
			var divLeft = ($("#divCircle").width() - $("#middleBubble").width())/2;
		//	$("#middleBubble").css("top",divTop + "px");
			$("#middleBubble").css("left",divLeft + "px");
			
			//Arrange the icons in a circle centered in the div
			numItems = $( "#divCircle img" ).length; //How many items are in the circle?
			start = 0.25; //the angle to put the first image at. a number between 0 and 2pi
			step = (2*Math.PI)/numItems; //calculate the amount of space to put between the items.
			
			//Now loop through the buttons and position them in a circle
			$( "#divCircle img" ).each(function( index ) {
				radius = ($("#divCircle").width() - $(this).width())/2; //The radius is the distance from the center of the div to the middle of an icon
				//the following lines are a standard formula for calculating points on a circle. x = cx + r * cos(a); y = cy + r * sin(a)
				//We have made adjustments because the center of the circle is not at (0,0), but rather the top/left coordinates for the center of the div
				//We also adjust for the fact that we need to know the coordinates for the top-left corner of the image, not for the center of the image.
				tmpTop = (($("#divCircle").height()/2) + radius * Math.sin(start)) - ($(this).height()/2);
				tmpLeft = (($("#divCircle").width()/2) + radius * Math.cos(start)) - ($(this).width()/2);
				start += step; //add the "step" number of radians to jump to the next icon
				
				//set the top/left settings for the image
				$(this).css("top",tmpTop);
				$(this).css("left",tmpLeft);
			});
			
			//set the highlight and bubble default based on the homepageGridDefault class
			currentGridSelector = $(".homepageGridDefault").attr("id");
			$("#" + currentGridSelector).attr("src", "images/home-" + currentGridSelector + "-icon-on.png");
			$("#middleBubble").html("<p><b>" +...