RNrbxO

index.html

<div class="container">
   <div class="row breadcrumbs">
     <div class="col-md-3">
       <h2>Checkout</h2>
     </div>
     
     <div class="col-md-3 crumb">
       <i class="fa fa-caret-up"></i>
       <h4>Select Tickets</h4>
     </div>
     <div class="col-md-3 crumb">    
       <i class="fa fa-caret-up"></i>
       <h4>Payment</h4>
     </div>
     <div class="col-md-3 crumb active">
       <i class="fa fa-caret-up"></i>
       <h4>Confirmation</h4>
     </div>
   </div>
  
   <div class="row">
     <div class="col-md-12 prg">
       <div class="row">
         <div class="col-md-3 done"></div>
         <div class="col-md-3 done"></div>
         <div class="col-md-3 done"></div>
         <div class="col-md-3"></div>
       </div>
     </div>
   </div>
</div>

RNrbxO.markdown

RNrbxO

A Pen by Christian Romney on CodePen.

License.

style.css

.breadcrumbs div {
  height: 65px;
  background-color: #fecd4e;
}

.crumb {  
  padding: 0;
}

.crumb h4 {
  outline: 1px solid red;
  margin: 0;
  position: absolute;
  top: 50%;
  margin-top: -9px;
  display: block;
  width: 100%;
}

.crumb .fa {
  position: absolute;
  bottom: -4px;
  margin-left: -9px;
  padding: 0;
  display: none;
}

.breadcrumbs .active .fa { 
  display: block;
}

.prg {
  background-color: orange;
  color: #fff;
  min-height: 2px;
}

.prg .done {
  background-color: #000;
  min-height: 2px;
}