Bootstrap - Progress Indicator

Question

I have an app that uses Bootstrap 3. I am trying to make a responsive progress indicator. The indicator has between three and five steps. Each step shows an icon, the step name, and the step status. When on mobile, I'm trying to make it look like this:

o  Step 1
|  completed monday
|
o  Step 2
|  in progress
|
o  Step 3
   to be done

When the screen appears on anything other than a phone, I'm trying to show it like this:

        o----------------o---------------o
     Step 1            step 2          step 3
completed Monday     in progress     to be done

In an effort to create this I current have the following code, which can be seen in 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'm not sure how to get the line between the circles. Is there a way to do this with bootstrap or CSS? If so, how?

Thanks!

Answer 1

I used basic table control on your HTML code (horizontal):

<div class="row">
  <div class="col-xs-12">
    <ul class="list-unstyled"> 
      <table>
        <tr>
          <td>
      <li>
        <i class="fa fa-circle"></i>
        <span>-----------------------------</span>
        <br>
        Step 1
        <br>
          <span class="text-muted">completed monday</span>
      </li>
          </td>
          <td>
      <li>
        <i class="fa fa-bullseye"></i>
        <span>-----------------------------</span>
        <br>
        Step 2<br>
        <span class="text-muted">in progress</span>
      </li>
          </td>
          <td>
      <li>
        <i class="fa fa-circle-o"></i><br>

        Step 3<br>
        <span class="text-muted">to be done</span>

      </li>
          </td>
         </tr> 
      </table>
    </ul>
  </div>
</div>

Vertical version:

CSS:

.vertical_line{height:150px; width:1px;background:#000; margin-left:5px;}

HTML:

<div class="row">
  <div class="col-xs-12">
    <ul class="list-unstyled"> 
      <li>
        <i class="fa fa-circle"></i>
        Step 1 &nbsp; -
          <span class="text-muted">completed monday</span>
        <div class="vertical_line"></div>
      </li>
      <li>
        <i class="fa fa-bullseye"></i>
        Step 2 &nbsp; -
        <span class="text-muted">in progress</span>
        <div class="vertical_line"></div>
      </li>
      <li>
        <i class="fa fa-circle-o"></i>
        <span class="text-muted">to be done</span>
      </li>
    </ul>
  </div>
</div>

You can also change the horizontal to have a CSS like the vertical version.

Answer 2

I have used @apollo's solution and made simple change on ul class.

I have use <ul class="list-inline"> instead of <ul class="list-unstyled">

Created JsFiddle for you.