Как я могу связать целый раздел панели прогресса Bootstrap?

Question

Я хочу, чтобы пользователь мог переходить через раздел панели прогресса Bootstrap (несколько баров) на другую страницу.Это возможно?Если да, то как?

https://getbootstrap.com/docs/4.0/components/progress/#multiple-bars

ОБНОВЛЕНИЕ: Если я введу это в jsfiddle, индикаторы выполнения полностью исчезнут:

<!-- 
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container"> 

<! # NOT WORKING (with href) # !/> 
<div class="progress">
<a href="#">
<div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
</a>
<a href="#">
<div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
</a>
<a href="#">
<div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</a>
</div>     

Однако это работает просто отличнобез указания & тега:

<!-- 
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container"> 
<! # WORKING (no href) # !/>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Answer 1

Это сработало отлично!

<!-- 
    Bootstrap docs: https://getbootstrap.com/docs
-->
<div class="container"> 

    <div class="progress">

    <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100">
        <a href="#"></a>
    </div>

    <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
        <a href="#"></a>
    </div>

    <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
        <a href="#"></a>
    </div>

</div>

Спасибо, Обсидиан.