Wizard reponsiveness issue

Question

I am creating following wizard.

I have tried following; but its not working as it should be. Its layout disturbs while resizing window. It should be responsive. What can be best way to implement it so that it should remain Responsive despite whatever resolution is.

Fiddle with issue

HTML:

<div class="col-md-10">
    <div class="wizard-wrapper">
        <div class="node-wrapper text-center wactive">
            <div class="node"><span>1</span>

            </div>
            <label class="lbl-wizard">Singn Up</label>
        </div>
        <div class="node-wrapper text-center">
            <div class="node"><span>2</span>

            </div>
            <label class="lbl-wizard">Order Info</label>
        </div>
        <div class="node-wrapper text-center">
            <div class="node"><span>3</span>

            </div>
            <label class="lbl-wizard">Preview Info</label>
        </div>
        <div class="node-wrapper text-center">
            <div class="node"><span>4</span>

            </div>
            <label class="lbl-wizard">Payment Method</label>
        </div>
        <div class="node-wrapper text-center">
            <div class="node"><span>5</span>

            </div>
            <label class="lbl-wizard">Complete Order Info</label>
        </div>
        <div class="connection"></div>
    </div>
</div>

CSS

/* wizard */
.wizard h2 {
    margin-top: 5px;
}

.node {
    background: #2d2f32;
    border-radius: 30px;
    color: #fff;
    display: inline-block;
    height: 37px;
    text-align: center;
    width: 37px;
    border: 4px solid #C2C6C9;
}

.wactive .node {
    background: #AA0405;
}
.node > span {
    display: inline-block;
    font-size: 14px;
    padding-top: 4px;
    font-family: open_sansbold;
}

.lbl-wizard {
    display: block;
    font-family: open_sansregular;
    font-size: 14px;
    color: #2d2f32;
    padding-top: 5px;
}

.node-wrapper.text-center {
    float: left;
    padding: 0 5%;
    position: relative;
    z-index: 1;
}

.connection {
    background: #c2c6c9;
    display: inline-block;
    height: 5px;
    margin-top: -113px;
    padding-top: 7px;
    position: relative;
    vertical-align: middle;
    width: 100%;
    z-index: 0;
}

FYI: I am using bootstrap.

Answer 1

You can set the width of a node.wrapper element to one fifth of the resolution width.

width: calc(100% / 5);

Also, you should change .connection so it stays at one position:

.connection {
    background: #c2c6c9;
    display: block; (new)
    height: 5px;
    margin-top: 38px; (new)
    padding-top: 7px;
    position: absolute; (new)
    vertical-align: middle;
    width: 100%;
    z-index: 0;
}

Fiddle