title: Positioning a div circle on the center of four col-md-6 bootstrap div
body: <p>I want to achieve a layout as shown in the figure below:
  <a href="https://i.stack.imgur.com/DZ18x.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DZ18x.png" alt="enter image description here"></a></p>
  
  <p>I have 4 col-md-6 dive with a background image (and size cover), i want to put on top of the center of them a circle with a text (completely implemented in CSS).</p>
  
  <p>I want to keep the design responsive so I was wondering which is the best way of dealing with absolute and relative positioning and responsiveness?</p>