Is there a way to incorporate steps (circles with numbers inside) on top of a Bootstrap 4 progress bar that are equally spaced? I have been considering the following approach:
// css
.wrapper-progress-step {
/* what should go here? this would ensure that steps are positioned on top of the bar */
}
.steps {
/*what should go here? possibly set position to relative to place them on top of the bar */
}
.circle {
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.428571429;
border-radius: 15px;
margin-top: 0;
}<div class="wrapper-progress-step">
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
<!-- these steps should be placed above the progress bar, dividing it into equal spaces -->
<div class="steps">
<div class="circle">1</div>
<div class="circle">2</div>
<div class="circle">3</div>
<div class="circle">4</div>
</div>
</div>