Индикатор выполнения бутстрапа в секциях

Question

Я новичок в бутстрапе. Мне нужно создать секционный индикатор выполнения (прикрепленное изображение) с каждым разделом с надписью над ним. Я попытался с несколькими div с классами столбцов, но не смог достичь точного требования.

Answer 1

Попробуйте использовать Бары Bootstrap штабели Прогресса, Например:

Создать многослойный прогресс бар, разместив несколько баров в тот же <div class="progress">

<div class="progress"> 

    <div class="progress-bar progress-bar-success" role="progressbar" style="width:40%"> Free Space</div> 

    <div class="progress-bar progress-bar-warning" role="progressbar" style="width:10%">Warning</div> 

    <div class="progress-bar progress-bar-danger" role="progressbar" style="width:20%">Danger</div> 

</div> 

См w3schools.com DEMO

---

Смотрите этот пример:Я надеюсь, что это работает, как вам нужно, спасибо.

.progress-bar-success{ 
 
    border:solid 1px; 
 
} 
 

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<br /><br /> 
 
<div class="container"> 
 
    <div class="progress"> 
 
    <div class="progress-bar progress-bar-success" role="progressbar" style="width:20%">Label 1</div> 
 
    <div class="progress-bar progress-bar-success" role="progressbar" style="width:20%">Label 2</div> 
 
    <div class="progress-bar progress-bar-success" role="progressbar" style="width:20%">Label 3</div> 
 
    <div class="progress-bar progress-bar-success" role="progressbar" style="width:20%">Label 4</div> 
 
    <div class="progress-bar progress-bar-success" role="progressbar" style="width:20%">Label 5</div> 
 
    </div> 
 
</div> 
 

 
</body> 
 
</html>