title: Create a css responsive circle with centered text content inside an image container
body: <p>I need to create a circle with text inside , centered. This circle must be inside an image full width container. Html should look like this:</p>
  
  <pre><code>&lt;div class="class-img"&gt;
      &lt;img src="static/img/class-home.png" class="img-responsive" alt=""&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-lg-4"&gt;
                  &lt;div class="circle"&gt;
                      &lt;div class="caption-text"&gt;&lt;/div&gt; 
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Could you tell me how to make this circle and style it to be in the top middle of the container image? I'm using bootstrap 3</p>
  
  <p>This is an snapshot of what I want to create:</p>
  
  <p><a href="https://i.stack.imgur.com/TxEXG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TxEXG.png" alt="enter image description here"></a></p>