I have a mobile application that is built using Bootstrap 3. I am currently working on creating a responsive progress indicator for the app. This indicator will consist of three to five steps, each showing an icon, step name, and status. On mobile devices, I want the indicator to display like this:
o Step 1
| completed monday
|
o Step 2
| in progress
|
o Step 3
to be done
For screens larger than phones, I would like the indicator to appear as follows:
o----------------o---------------o
Step 1 step 2 step 3
completed Monday in progress to be done
To achieve this layout, I have implemented the following code, which can be viewed on this bootply.
<div class="row">
<div class="col-xs-12">
<ul class="list-unstyled">
<li>
<i class="fa fa-circle"></i>
Step 1<br>
<span class="text-muted">completed monday</span>
</li>
<li>
<i class="fa fa-bullseye"></i>
Step 2<br>
<span class="text-muted">in progress</span>
</li>
<li>
<i class="fa fa-circle-o"></i>
<span class="text-muted">to be done</span>
</li>
</ul>
</div>
</div>
I am struggling to find a way to add the lines between the circles in the desktop view. Is there a way to achieve this using Bootstrap or CSS? If so, could someone please provide guidance on how to do this?
Thank you!