Css 在引导进度条顶部添加数字步骤

我怎样才能在Bootstrap 4进度条的顶部添加步骤（圆圈内有数字），使它们等分。我在想这样的事情：

//css
.包装器进度步骤{
/*这里应该放什么？这将保证台阶“浮动”在吧台顶部*/
}
.步骤{
/*这里应该是什么？可能是相对于酒吧顶部的位置*/
}
.圆圈{
宽度：30px；
高度：30px；
文本对齐：居中；
填充：6px0；
字体大小：12px；
线高：1.428571429；
边界半径：15px；
边际上限：0；
}

1.
2.
3.
4.

Flexbox提供了一种简单的方法来均衡地划分。我想这会给你一个正确的方向

.steps {
  display: flex;
  justify-content: space-evenly;
  width: 100%;
 }