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:

```
<div class="class-img">
    <img src="static/img/class-home.png" class="img-responsive" alt="">
    <div class="container">
        <div class="row">
            <div class="col-lg-4">
                <div class="circle">
                    <div class="caption-text"></div> 
                </div>
            </div>
        </div>
    </div>
</div>

```

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

This is an snapshot of what I want to create:

[![enter image description here](https://i.stack.imgur.com/TxEXG.png)](https://i.stack.imgur.com/TxEXG.png)