breadcrumb-state.php

<div class="row code-breadcrumb">
    <div class="col-md-3 col-sm-3 col-xs-3">
        <?php $searchActive = (isset($search) && $search) ? 'active' : ''; ?>
        <div class="code-breadcrumb-state-label <?php echo $searchActive; ?>">Search</div>
        <div class="code-breadcrumb-state-wrapper">
            <div class="code-breadcrumb-state <?php echo $searchActive; ?>"><i class="fa fa-search"></i></div>
        </div>
    </div>
    <div class="col-md-3 col-sm-3 col-xs-3">
        <?php $reviewActive = (isset($review) && $review) ? 'active' : ''; ?>
        <div class="code-breadcrumb-state-label <?php echo $reviewActive; ?>">Review</div>
        <div class="code-breadcrumb-state-wrapper">
            <div class="code-breadcrumb-state <?php echo $reviewActive; ?>"><i class="fa fa-comments"></i></div>
        </div>
    </div>
    <div class="col-md-3 col-sm-3 col-xs-3">
        <?php $detailsActive = (isset($details) && $details) ? 'active' : ''; ?>
        <div class="code-breadcrumb-state-label <?php echo $detailsActive; ?>">Details</div>
        <div class="code-breadcrumb-state-wrapper">
            <div class="code-breadcrumb-state <?php echo $detailsActive; ?>"><i class="fa fa-file"></i></div>
        </div>
    </div>
    <div class="col-md-3 col-sm-3 col-xs-3">
        <?php $paymentActive = (isset($payment) && $payment) ? 'active' : ''; ?>
        <div class="code-breadcrumb-state-label <?php echo $paymentActive; ?>">Payment</div>
        <div class="code-breadcrumb-state-wrapper">
            <div class="code-breadcrumb-state <?php echo $paymentActive; ?>"><i class="fa fa-usd"></i></div>
        </div>
    </div>
</div>

code.css

/* Breadcrumb */

.code-breadcrumb {
    position: relative;
}

.code-breadcrumb + div {
    margin-top: 100px;
}

.code-breadcrumb:after {
    position: absolute;
    content: " ";
    width: 100%;
    border-top: 3px solid #BCBCC4;
    z-index: -1;
    top: 55px;
}
.code-breadcrumb-state-wrapper {
    height: 50px;
    width: 50px;
    margin: 0 auto;
    background-color: #EDEEEF;
    border-radius: 50%;
    padding-top: 5px;
}
.code-breadcrumb-state-label {
    text-align: center;
    padding-bottom: 10px;
    font-weight: 600;
    color: #BCBCC4;
}
.code-breadcrumb-state-label.active {
    color: #0FAFE4;
}
.code-breadcrumb-state {
    height: 40px;
    width: 40px;
    background-color: #EDEEEF;
    border: 3px solid #BCBCC4;
    color: #BCBCC4;
    border-radius: 50%;
    margin: 0 auto;
    text-align: center;
    font-size: large;
    padding: 4px;
}
.code-breadcrumb-state.active {
    border-color: #0FAFE4;
    color: #0FAFE4;
}