three circles in a line with equal spacing - css

Question

I have a design which I am trying to replicate in HTML and CSS.
At this moment, I am able to get this in fiddle.
I am wondering how I can make the above three circles in a row with equal spacing in each of them in my fiddle as shown exactly in the design. I tried using,
<span class="circle"></span>
.circle:before {
content: ' \25CF';
font-size: 200px;
}
And,
#circle {
background: #f00;
width: 200px;
height: 200px;
border-radius: 50%;
}
But unfortunately, I was not able to get the same design in my above fiddle.

Answer 1

You can create the circles with css:
.circle {
width: 40px;
height: 40px;
border-radius: 20px;
margin: 0 auto;
}
And set each of them the relevant color:
.circle.purple {
background: purple;
}
.circle.orange {
background: orange;
}
.circle.green {
background: green;
}
Here is the fix based on your jsfiddle:
https://jsfiddle.net/Lh5m11ya/3/embedded/result/

Answer 2

You don't really need to futz with :before. Just set the thing to display: block;
.circle {
display: block;
height: 100px;
width: 100px;
background: red;
border-radius: 100%;
}
https://jsfiddle.net/Lh5m11ya/2/

Answer 3

here is a flex box based approach: https://jsfiddle.net/z2s8zq72/
put a container class with display flex and some config:
.item-container {
display: flex;
flex-direction: column;
align-items: center;
}
This jus defines it as a flex display and the direction sets it to display items top to bottom and then aligns everything in the center.
and the circles like:
.circle {
width: 50px;
height: 50px;
border-radius: 50%;
}
.circle.red {
background: #f00;
}
.circle.green {
background: green;
}
.circle.blue {
background: blue;
}
and in html:
<div id="healthy" class="col-lg-4 item-container">
<div class="circle blue"></div>
<h3>title</h3>
<p>text.</p>
</div>