I am currently working on achieving a design similar to the one shown in the image below using Bootstrap 4 and CSS:
https://i.sstatic.net/now05.png
Here is the CSS code I have developed so far:
.inner-circle {
display: block;
height: 70px;
width: 70px;
line-height: 70px;
-moz-border-radius: 50%; /* or 50% */
border-radius: 50%; /* or 50% */
background-color: #d2e4ff;
text-align: center;
font-size: 2em;
}
.outer-circle {
display: block;
height: 90px;
width: 90px;
line-height: 90px;
-moz-border-radius: 50%; /* or 50% */
border-radius: 50%; /* or 50% */
background-color: #e7f1ff;
text-align: center;
font-size: 2em;
}
In addition, here is the HTML code I have used:
<div class="container" style="margin-top: 50px;">
<div class="row">
<div class="col-sm-6">
<div class="row" class="h-100">
<div class="col-sm-2 h-100">
<span class="outer-circle mx-auto my-auto">
<span class="inner-circle mx-auto my-auto">
<img src="images/breakfast.svg" height="40" width="40" />
</span>
</span>
</div>
<div class="col-sm-10 my-auto">
<h4 class="display5">Cool stuff</h4>
</div>
</div>
</div>
<div class="col-sm-6"></div>
</div>
</div>
The current result of this setup can be seen in the following image link:
https://i.sstatic.net/otucq.png
This result does not match my desired outcome. I have struggled to center the image within the inner circle and then position the inner circle within the outer circle. Is there an easy way to achieve this alignment, or should I consider creating the entire design as an image and inserting it instead?