How to make a centered, responsive CSS circle within a Boostrap div?

Question

See JSfiddle below:

https://jsfiddle.net/jamesdd9302/mpocy8vo/

I have 3 steps side by side, hence the parent <div class="col-xs-4">. Each step should look like a clean circle that's centered (which I'm trying to achieve with an inner div placement) with a number inside of it.

Answer 1

Because your width is unknown (100%), you are going to want to set the height using padding percentage, because percentage padding is calculated from the width.

.circle {
  background: #515151;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: max;
  text-align: center;
  color: white;
  width: 100%;
  padding-bottom:100%;
  height:0;
  position:relative;
}
.circle-caption {
  display: block;
  left: 0;
  height: 1em;
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -.5em;
}

<div class="circle" id="step-1-default-image-box">
    <span class="circle-caption">1</span>
</div>

Vertical centering becomes tricky with this, so you'll have to add another wrapper around the text that you can position absolutely.

Someone else just added an answer like this and deleted it, but I think that this is the best way to do this.