Css: How To Make Circles Connected By Lines Responsive With Bootstrap?

I have the code which got me three circles connected by two lines. Have a look here: JSFIDDLE Here is my code: HTML

.form-group {
    background:linear-gradient(to top,#cccccc,#cccccc) repeat-x center;/* gradient can be replace for a 1pixel gray image */background-size:2px2px;
    min-width:50px;/* keep those 3 15px boxes on one line */

}
.circle {
    background: #CCCCCC;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border:1px solid #CCCCCC;
    margin:auto;
}

& less HTML

<divclass="form-group"><divclass="circle"style="float:left"></div><divclass="circle"style="float: right;"></div><divclass="circle"></div></div>

Solution 2:

The simplest solution contains two divs and two pseudo elements. position: absolute keeps the circles over the parents border and position: relative keeps the circles positioned relative to the parent.

Have an example!

HTML

<divclass="parent"><divclass="child"></div></div>

CSS

* {
  margin:0;
  padding:0;
}

.parent {
  margin:100px00;
  width:100%;
  border-bottom:2px solid #CCC;
  position:relative;
  z-index:-1;
}

.parent:before,.parent:after,.child {
  background:#CCC;
  width:15px;
  height:15px;
  border-radius:50%;
  border:1px solid #CCC;
  position:absolute;
  content:'';
  top:-8px;
}

.parent:before {
  left:0;
}

.parent:after {
  right:0;
}

.child {
  left:50%;
  margin-left:-8px;
}

Solution 3:

Try this:

html:

<divclass="responsive-circle"><i></i></div>

css:

.responsive-circle {
    height: 2px;
    background-color: #CCC;
    overflow: visible;
    position: relative;
}

.responsive-circle:before,
.responsive-circle:after,
.responsive-circle > i {
    background: #CCCCCC;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border:1px solid #CCCCCC;
    position: absolute;
    content: "";
    top: -7px;
}

.responsive-circle:after {
    right: 0;
}

.responsive-circle > i {
    left: 50%;
    left: calc(50% - 9px);
}

demo:http://jsfiddle.net/m787ydjz/

Share