Bootstrap with horizontal strikethrough line

Question

I'm looking to use bootstrap to create 6 columns with a dot in each that is connected by a line ( as you can see below )

Is this possible with bootstrap? I can get the dots to sit centrally within the div but I have no idea how to get the horizontal line through the middle.

Here is what I have so far.

<div class="row">
    <div class="col-md-12 text-center NavDots">
        <div class="col-md-2 text-center NavItemActive"><span class="dotActive"></span><span class="dotSpacer"></span></div>
        <div class="col-md-2 text-center NavItem"><span class="dot"></span><span class="dotSpacer"></span></div>
        <div class="col-md-2 text-center NavItem"><span class="dot"></span><span class="dotSpacer"></span></div>
        <div class="col-md-2 text-center NavItem"><span class="dot"></span><span class="dotSpacer"></span></div>
        <div class="col-md-2 text-center NavItem"><span class="dot"></span><span class="dotSpacer"></span></div>
        <div class="col-md-2 text-center NavItem"><span class="dot"></span><span class="dotSpacer"></span></div>
    </div>
</div>

.dot {
    height: 25px;
    width: 25px;
    background-color: #8C8C8C;
    border-radius: 50%;
    display: inline-block;
  }

question from:https://stackoverflow.com/questions/65875973/bootstrap-with-horizontal-strikethrough-line

Answer 1

Waitting for answers