Adding a line connecting all div

Question

I have several circles and am trying to connect all div divs with a line. Thus, these should be two lines connecting the first, second, second and third. The line should be centered on the circle.

I am trying to make a string relative and put hrwith an absolute position, but it turned out that it does not work.

I'm not sure the best way to implement it to work with it in response

.circle {
  width: 49%;
  padding-bottom: 49%;
  border-radius: 50%;
  background-color: purple;
  display: inline-block;
}

.container .row .col-xs-4 {
  padding-right: 0;
  padding-left:0;
  margin-left: 0;
  margin-right: 0;
  border: 1px solid black;
  text-align: center;
  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
     <div class="col-xs-4">
    <div class="circle"></div>
  </div>
  
  <div class="col-xs-4">
    <div class="circle"></div>
  
  </div>
  
  <div class="col-xs-4">
    <div class="circle"></div>
  
  </div>
  
    
  </div>
 
 
</div>

Run codeHide result

Answer 1

33,3%, position: absolute div width: 66.6% . ( , , 50% , 1px)

.circle {
  width: 49%;
  padding-bottom: 49%;
  border-radius: 50%;
  background-color: purple;
  z-index: 2;
  position: relative;
  display: inline-block;
}

.container .row .col-xs-4 {
  padding-right: 0;
  padding-left:0;
  margin-left: 0;
  margin-right: 0;
  border: 1px solid black;
  text-align:center;
}

.container { position: relative; }
.line { 
  width: 66.6%; 
  height: 1px; 
  background: #000; 
  position: absolute; 
  top: 50%;
  left: 16.65%; /* Half the circle width **/; 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  
  <div class="row">
    <div class="col-xs-4">
      <div class="circle"></div>
    </div>
  
    <div class="col-xs-4">
      <div class="circle"></div>
    </div>
  
    <div class="col-xs-4">
      <div class="circle"></div>
    </div>
  
  </div>
  
  <div class="line"></div>
 
</div>

Hide result

Answer 2

<div class="container">
<div class="row">
<div class="col-xs-4">
  <div class="circle"></div>
  <div class="line"></div>
</div>
<div class="col-xs-4">
  <div class="circle"></div>
  <div class="line"></div>
</div>  
<div class="col-xs-4">
  <div class="circle"></div>
  <div class="line"></div>
</div>    

.circle {
  width: 49%;
  padding-bottom: 49%;
  border-radius: 50%;
  background-color: purple;
}

.container .row .col-xs-4 {
  padding-right: 0;
  padding-left:0;
  margin-left: 0;
  margin-right: 0;
  border: 1px solid black;
  }

 .col-xs-4 {
   position: relative;
 } 
 .line {
   position: absolute;
   top: 50%;
   width: 100%;
   border: 1px solid #000;
 }