Twitter bootstrap – How to achieve video-play navigation like khan academy in bootstrap?

I used Akorn's answer as a baseline to achieve what I needed. This was a nice exercise for me (new to css). I fiddled with the css and html, removed a bunch of properties that seemed to do nothing, and came up with a way to use this in a table instead of an un-ordered list - the way I need it: open (first item), line (throughout) then close (last item). Here's the fiddle. I hope this gets improved or reworked and if anybody does please update this page, thanks!

CSS

/******************************************

Subway navigation (by sOltan stackoverflow.com)

*******************************************/

.subway-station {
  color: rgb(255, 255, 255);
  height: 100%; 
  width: 100px;
  position: relative;
}

.subway-open {
    top: 60px;      /* start with a margin from the top of the table cell */     
    height: 100%;   /* draw through the circled number */
    left: 40px;     /* indent this much */
    width: 10px;
    position: absolute; /* position relative to ancestor subway-station */
    z-index: 10;
    color: rgb(68, 68, 68);
    background: rgb(205, 205, 205) none repeat scroll 0% 0% / auto padding-box border-box;
}

.subway-close {
    top: 0px;       /* start from the top of the table cell */  
    height: 50px;   /* draw line this much from top */
    left: 40px;     /* indent this much */
    width: 10px;    /* width of the line */
    position: absolute; /* position relative to ancestor subway-station */
    z-index: 10;
    color: rgb(68, 68, 68);
    background: rgb(205, 205, 205) none repeat scroll 0% 0% / auto padding-box border-box;
}

.subway-line {
    bottom: 0px;    /* this indicates to start drawing line from the bottom */
    height: 100%;   /* draw all the way to the top of the table cell */
    left: 40px;     /* indent this much */
    width: 10px;
    position:absolute; /* position relative to ancestor subway-station */
    z-index: 10;
    color: rgb(68, 68, 68);
    background: rgb(205, 205, 205) none repeat scroll 0% 0% / auto padding-box border-box;
}

.number {
    font-family: 'Lato';
    z-index: 20;
    position: absolute;
    left: 0px;
}

.circled {
    display:inline-block;
    margin: 10px;
    border-radius: 50%;    
    padding: 10px 20px; 
    background: #fff;
    border: 8px solid #CDCDCD;
    color: #CDCDCD;
    text-align: center;
    font: 32px Arial, sans-serif;
    z-index: 20;
    position: absolute;
}
.circled:hover {
    background-color: #586CEF !important;
    color: white;
}

HTML

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css">   

<table class="table table-condensed task-table">
  <tbody>
    <tr class='active'>
      <td class="subway-station">
        <div class="subway-open"></div>
        <div class="circled number">1</div>
      </td>
      <td class="serie">
        <div>
          <h1>
            <a href="">The Alphabet Part 1</a>
          </h1>
          <p>In the beginning, there was A, B, C. Exposing yourself to foreign language can change the way you look at the world and create comprehensive avenues that would otherwise be unavailable.</p>
        </div>
      </td>
    </tr>
    <tr class='active'>
      <td class="subway-station">
        <div class="subway-line"></div>
        <div class="circled number">2</div>
      </td>
      <td class="serie">
        <div>
          <h1>
            <a href="">The Alphabet Part 2</a>
          </h1>
          <p>Domestic confined any but son bachelor advanced remember. How proceed offered her offence shy forming. Returned peculiar pleasant but appetite differed she. Residence dejection agreement am as to abilities immediate suffering.</p>
        </div>
      </td>
    </tr>
    <tr class='active'>

      <td class="subway-station">
        <div class="subway-line"></div>
        <div class="circled number">3</div>
      </td>
      <td class="serie">
        <div>
          <h1>
            <a href="">The Alphabet Part 3</a>
          </h1>
          <p>zzZZZZZZ Agreement distrusts mrs six affection satisfied.</p>
        </div>
      </td>
    </tr>
    <tr class='active'>

      <td class="subway-station">
        <div class="subway-close"></div>
        <div class="circled number">4</div>
      </td>
      <td class="serie">
        <div>
          <h1>
            <a href="">The Alphabet Part 4</a>
          </h1>
          <p>Sigh view am high neat half to what. Sent late held than set why wife our. If an blessing building steepest. Agreement distrusts mrs six affection satisfied. Day blushes visitor end company old prevent chapter.</p>
        </div>
      </td>
    </tr>
  </tbody>
</table>