如何添加引导进度条？

Question

Currently making an online catering planner which is a part of our thesis project. And what I would like to do is to add a progress bar (bootstrap 3) to it. It is a series of forms in form of slider which is kinda based to this

Preview of the jQuery plugin I'm talking about:

jFormslider by Harish U Warrier

Answer 1

A progress bar is used to show "the progress of a workflow or action."
This is code from 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>

sr is screen reader (for accessibility)
You can use bootstrap colors: success, info, warning, etc. (progress-bar-info)
Add stripes: class="progress-bar progress-bar-success progress-bar-striped"

Hope this helps.