Bootstrap Snippet Tree or Sitemap using bootstrap 4 ( Winson222 ) using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"> 
<!---- Must Add above thing or you can use alternative icons or CSS Entities---->
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.tree li {
    list-style-type:none;
    margin:0;
    padding:10px 5px 0 5px;
    position:relative
}
.tree li::before, 
.tree li::after {
    content:'';
    left:-20px;
    position:absolute;
    right:auto
}
.tree li::before {
    border-left:2px solid #000;
    bottom:50px;
    height:100%;
    top:0;
    width:1px
}
.tree li::after {
    border-top:2px solid #000;
    height:20px;
    top:25px;
    width:25px
}
.tree li span {
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border:2px solid #000;
    border-radius:3px;
    display:inline-block;
    padding:3px 8px;
    text-decoration:none;
    cursor:pointer;
}
.tree>ul>li::before,
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
/* Make it simple */
/* Pure css */
/* You can also use this for sitemap */
/* check this out=> https://bootsnipp.com/Winson222  */
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Tree or Sitemap using bootstrap 4 ( Winson222 )"
Bootstrap 4.1.1 Snippet by Winson222

Related: See More

Questions / Comments:

"Tree or Sitemap using bootstrap 4 ( Winson222 )" Bootstrap 4.1.1 Snippet by Winson222

Related: See More

Questions / Comments:

"Tree or Sitemap using bootstrap 4 ( Winson222 )"
Bootstrap 4.1.1 Snippet by Winson222