Шаги начальной установки с строкой

Question

Я хочу сделать что-то вроде STEPS в бутстрапе. Я знаю, что на http://getbootstrap.com/ есть раздел с индикаторами прогресса, как это:

<div class="progress"> 
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> 
    <span class="sr-only">60% Complete</span> 
    </div> 
</div> 

, но мне нужно что-то вроде этого:

Я знаю, как сделать ссылки, но как сделать эту линию встроенные ссылки?

<div class="steps-form"> 
    <span class="label">ORDER</span> 
    <span class="label">PAYMENT</span> 
    <span class="label">HAPPINES</span> 
</div> 

СПАСИБО!

Answer 1

HTML:

<div class="col-md-12 new-steps-form"> 
    <div class="col-md-4"> <h1 class=""><span class="" id="krok1">Order</span></h1></div> 
    <div class="col-md-4"> <h1 class="heading-1"><span class="" id="krok2">Payment</span></h1></div> 
    <div class="col-md-4"> <h1 class=""><span class="" id="krok3">Happines</span></h1></div> 
</div> 

CSS:

.new-steps-form h1{ 
    font-size: 15px !important; 
    color:#bdc3c7 !important; 
    text-transform: uppercase; 
} 
.new-steps-form .heading-1{ 
    position:relative; 
    text-align: center 
    display:inline; 
} 
.new-steps-form .heading-1:after { 
    content: ""; 
    display: block; 
    border-top: solid 2px #bebebe; 
    width: 100%; 
    height: 2px; 
    position: absolute; 
    top: 50%; 
    z-index: 0; 
} 
.new-steps-form .heading-1 span { 
    background-color: #fff !important; 
    padding: 0 20px !important; 
    position: relative; 
    z-index: 1; 
}