How to link between circles with a dash line from the center? - html

Question

I have 3 circles in a row and I want to link between them from the center with a dash line, Here is a screenshot similar to what I want:
Here is the html code:
<div class="container-fluid">
<div class="row">
<div class="col-xs-push-3 col-xs-6 text-center">
<div class="col-xs-3">
<div class="wrapper">
<span class="circle text-center">A</span>
<span class="dash_line" style="transform: translate(232%, -215%);">---</span>
</div> <!-- wrapper -->
</div> <!-- col-xs-3 -->
<div class="col-xs-6">
<div class="wrapper">
<!--<span class="dash_line">---</span>-->
<span class="circle text-center">B</span>
<!--<span class="dash_line">---</span>-->
</div> <!-- wrapper -->
</div> <!-- col-xs-6 -->
<div class="col-xs-3">
<div class="wrapper">
<span style=" transform: translate(-114%, 135%);" class="dash_line">-----</span>
<span class="circle text-center">C</span>
</div> <!-- wrapper -->
</div> <!-- col-xs-3 -->
</div> <!-- col-xs-6 -->
</div> <!-- row -->
</div> <!-- container-fluid -->
Here is the custom CSS:
.row{
margin:5% auto
}
.circle {
border-radius: 50%;
border: 1px solid #d1cfc8;
background-color: #f7eebe;
padding: 15% 35%;
font-size: 300%;
display: inline-block
}
.dash_line{
position: absolute;
transform: translateY(50%);
}
Here is a fiddle to see it live:
http://jsfiddle.net/mpvf5rxa/37
As you see i'm using specific values for each dash line, I want it to be dynamic.
I don't mind changing the elements, Adding/removing elements.
Also I don't mind using Javascript/Jquery to achieve that.

Answer 1

Edit, since you use bootstrap 3 , another approach with pseudo and margins could be used instead:
.ABC {
text-align: center;
}
.ABC span {
padding: 1vw 2.8vw; /* any values of yours */
font-size: 5vw; /* any values of yours */
border: 1px solid; /* any values of yours */
border-radius: 50%;
display: inline-block;/* to trigger block formatting context .vertical padding + pseudo */
}
span + span /* filter out first span */{
margin-left:5vw;/* equals width of dashed line */
}
span + span::before {/* do not draw anything from first span */
content:'';
display:inline-block;
vertical-align:middle;
margin-left:-7.8vw;
margin-right:2.8vw;/* equal span padding*/
width:5vw;
border-top:dashed;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row ABC">
<span>A</span>
<span>B</span>
<span>C</span>
</div>
</div>
Original answers thinking bootsrap 4 was involved .
If you have only 3 elements to separate with a dashed line, you can use pseudos, order, built-in bootsrap class and much less markup:
here i added the ABC class to easily select this row, but you can use any other class or id.
.ABC span {
padding:1vw 2.8vw;/* any values of yours */
font-size:5vw;/* any values of yours */
border:1px solid;/* any values of yours */
border-radius:50%;
order:0;/* defaut*/
}
.ABC span + span {
order:2;/* leave order:1 for one pseudo */
}
.ABC span:last-of-type {
order:4;/* leave order:3 for the other pseudo */
}
.ABC:before,
.ABC:after {
content:'';
width:5vw;/* whatever size you need */
order:1;
border-top:dashed;
}
.ABC:after {
order:3;
}
.ABC:after {
order: 3;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class="row justify-content-center align-items-center ABC">
<span>A</span>
<span>B</span>
<span>C</span>
</div>
</div>

Answer 2

I'd certainly look into using Grid or Flex for this.
Here's a rough example I built with flex that could hopefully meet your needs with a few modifications!
http://jsfiddle.net/kh2q6vo7/7/
.container {
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 200px;
}
.a {
width: 50px;
height: 100px;
margin-right: 10px;
border: 1px solid red;
}
.b {
width: 75px;
height: 60px;
margin-right: 10px;
border: 1px solid blue;
}
.c {
width: 100px;
height: 25px;
border: 1px solid green;
}
.line--right {
position: relative;
}
.line--right:after {
content: "";
display: block;
width: 10px;
height: 1px;
background: black;
position: absolute;
right: -11px;
top: 50%;
}
<div class="container">
<div class="a line--right">A</div>
<div class="b line--right">B</div>
<div class="c">C</div>
</div>
You would want to change the elements to meet your needs. Container size, line size, even position and shape could change. Etc...
But with display: flex; You are able to center your elements vertically within a container. Allowing them to match up in the middle!
More References:
https://hackernoon.com/the-ultimate-css-battle-grid-vs-flexbox-d40da0449faf
https://rachelandrew.co.uk/archives/2016/03/30/should-i-use-grid-or-flexbox/