<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<div class="tree ">
<ul>
<li><span><a style="color:#000; text-decoration:none;" data-toggle="collapse" href="#Web" aria-expanded="true" aria-controls="Web"><i class="collapsed"><i class="fas fa-folder"></i></i>
<i class="expanded"><i class="far fa-folder-open"></i></i> Web</a></span>
<div id="Web" class="collapse show">
<ul>
<li><span><i class="far fa-file"></i><a href="#!"> Link 1</a></span></li>
<li><span><a style="color:#000; text-decoration:none;" data-toggle="collapse" href="#page1" aria-expanded="false" aria-controls="page1"><i class="collapsed"><i class="fas fa-folder"></i></i>
<i class="expanded"><i class="far fa-folder-open"></i></i> Page 1</a></span>
<ul><div id="page1" class="collapse">
<li><span><i class="far fa-file"></i><a href="#!"> Link 1</a></span></li>
<li><span><i class="far fa-file"></i><a href="#!"> Link 2</a></span></li>
<li><span><i class="far fa-file"></i><a href="#!"> Link 3</a></span></li>
<li><span><i class="far fa-file"></i><a href="#!"> Link 4</a></span></li></div>
</ul>
</li>
<li><span><a style="color:#000; text-decoration:none;" data-toggle="collapse" href="#Page2" aria-expanded="false" aria-controls="Page2"><i class="collapsed"><i class="fas fa-folder"></i></i>
<i class="expanded"><i class="far fa-folder-open"></i></i> Page 2</a></span>
<ul><div id="Page2" class="collapse">
<li><span><a style="color:#000; text-decoration:none;" data-toggle="collapse" href="#folder1" aria-expanded="false" aria-controls="folder1"><i class="collapsed"><i class="fas fa-folder"></i></i>
<i class="expanded"><i class="far fa-folder-open"></i></i> Folder 1</a></span>
<ul><div id="folder1" class="collapse">
<li><span><i class="far fa-file"></i><a href="#!"> Link 1</a></span></li>
<li><span><i class="far fa-file"></i><a href="#!"> Link 2</a></span></li>
<li><span><i class="far fa-file"></i><a href="#!"> Link 3</a></span> <a href="#!">& More Link</a></li></div>
</ul>