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

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

Related: See More


Questions / Comments:

Great snippet ! I was wondering how I could change the background color of an "open" element? Appreciate in advance any words of wisdom you could share with me!

TerryLipford () - 4 years ago - Reply 0