Bootstrap Tutorial - Display unordered list as Tree View

The following code shows how to display unordered list as Tree View.
Example

<!--Code revised from
http://fiddle.jshell.net/harshveer/KkRas/-->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
  href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<style type='text/css'>
.tree ul {<!--from  w w w. j av  a  2 s.co m-->
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.tree li {
  position: relative;
  padding: 4px 0 4px 20px;
}

.tree .wrapper {
  position: relative;
  display: block;
}

.tree .wrapper::before {
  content: '';
  position: absolute;
  width: 24px;
  left: -20px;
  height: 50%;
  border-bottom: 2px solid black;
}

.tree li::before {
  content: '';
  position: absolute;
  left: 0;
  height: 100%;
  border-left: 2px solid black;
}

.tree .sub-list::after {
  content: '';
  position: absolute;
  height: 50%;
  height: calc(50% + 4px);
  height: -webkit-calc(50% + 4px);
  top: 50%;
  left: 0;
  border-right: 2px solid black;
}

.tree li:last-child::before {
  content: '';
  position: absolute;
  border-left: 0 none;
}

.tree li:last-child .wrapper::before {
  width: 23px;
  border-left: 2px solid black;
}

.tree .expand-icon {
  position: absolute;
  line-height: 16px;
  font-size: 16px;
  top: calc(50% - 8px);
  left: -27px;
  background-color: white;
  padding: 0 1px;
}
/*Align thumbnails*/
.tree .thumb-icon {
  position: absolute;
  font-size: 16px;
  line-height: 16px;
  top: calc(50% - 8px);
  top: -webkit-calc(50% - 8px);
  left: 7px;
}
/*Shift list items forward*/
.tree .wrapper {
  padding-left: 24px;
}
/*Give border to list items*/
.tree .border {
  display: inline-block;
  border: 1px solid black;
  border-radius: 4px;
  padding-right: 3px;
  padding-left: 20px;
  margin-left: -20px;
}

.tree .expand-icon {
  cursor: pointer;
}
</style>
</head>
<body>
<body>

  <div class="tree">
    <ul>
      <li><span class="wrapper"><i class="icon-file thumb-icon"></i><span
          class="border">Item 1</span><span></span></li>
      <li><span class="wrapper"><i class="icon-file thumb-icon"></i><span
          class="border">Item 2</span></span></li>
      <li><span class="wrapper sub-list"><i
          class="icon-plus-sign-alt expand-icon"></i> <i
          class="icon-folder-open thumb-icon"></i><span class="border">Item
            3 with sub items</span></span>
        <ul>
          <li><span class="wrapper"><i
              class="icon-file thumb-icon"></i><span class="border">Sub-Item
                1</span></span></li>
          <li><span class="wrapper sub-list"><i
              class="icon-plus-sign-alt expand-icon"></i> <i
              class="icon-folder-open thumb-icon"></i><span class="border">Sub-Item
                2 with sub-sub items</span></span>
            <ul>
              <li><span class="wrapper"><i
                  class="icon-file thumb-icon"></i><span class="border">Sub-Sub-1</span></span></li>
              <li><span class="wrapper"><i
                  class="icon-file thumb-icon"></i><span class="border">Sub-Sub-2</span></span></li>
              <li><span class="wrapper"><i
                  class="icon-file thumb-icon"></i><span class="border">Sub-Sub-3</span></span></li>
            </ul></li>
          <li><span class="wrapper"><i
              class="icon-file thumb-icon"></i><span class="border">Sub-Item
                3</span></span></li>
        </ul></li>
      <li><span class="wrapper"><i class="icon-file thumb-icon"></i><span
          class="border">Item 4</span></span></li>
    </ul>
  </div>
</body>
</body> 
</html>
Click to view the demo