title: css: how to make circles connected by lines responsive with bootstrap?
body: <p>I have the code which got me three circles connected by two lines. Have a look here: <a href="http://jsfiddle.net/11mhutt6/" rel="nofollow">JSFIDDLE</a></p>
  
  <p>Here is my code:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="form-group"&gt;
              &lt;div class="col-md-4"&gt;&lt;/div&gt;
              &lt;div class="col-md-4"&gt;              
              &lt;div class="circle" style="float:left;"&gt;&lt;/div&gt;
              &lt;div id="horizontal" style="float:left;"&gt;&lt;/div&gt;
              &lt;div class="circle" style="float: right;"&gt;&lt;/div&gt;
              &lt;div id="horizontal" style="float: right;"&gt;&lt;/div&gt;
              &lt;div class="circle"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-md-4"&gt;&lt;/div&gt;
              &lt;/div&gt;              
          &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#horizontal
  {
   width: 230px;
   border-bottom: 2px solid #CCCCCC;
   padding-top: 6px;
  }
  .circle {
    background: #CCCCCC;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border:1px solid #CCCCCC;
  }
  </code></pre>
  
  <p>But this wont be responsive as i am setting width component to it. Is there anyway i can make it responsive using <code>twitter bootstrap</code>.</p>
  
  <p>Using <code>@media</code> queries wont help for this case. Any help will be appreciated.</p>