How to make such a connection between elements under Bootstrap?

Question

css

How can you implement such a black strip with circles connecting 4 lines. The design was carried out under the Bootstrap 4 grid, so the implementation specifically for it is interesting. But it is most likely that in terms of implementation methods it will not make a difference, what is BS, what is without it.
I'm waiting for help. Thanks in advance for your reply!

Answer 1

To draw this stripe, you need to use pseudo-elements and parity selectors.
::before- circles with borders
::after- lines
:nth-child(odd/even)to set the angle of the lines to
:nth-child(1,2,3,4,5, ...)generate different colors if they just always go in the same order. If they depend on the parent - currentColorif it should be random or something else - Javascript will already be needed.