Prem Tiwari - - Web Technologies
Are you want to create a Tree view file design using Bootstrap framework and CSS. It will support the level of parent-child treeview relation. At the end of this tutorial, I have added a live example of Bootstrap treeview.
Create an HTML file and add the below code before head tag closed.
1 2 3 4 |
Copy the below inside the head tag in your HTML file.
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 38 39 40 41 42 |
Create a CSS file as style.css and below code inside the file.
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 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | div.panel:first-child { margin-top:20px; } div.treeview { min-width: 100px; min-height: 100px; max-height: 256px; overflow:auto; padding: 4px; margin-bottom: 20px; color: #369; border: solid 1px; border-radius: 4px; } div.treeview ul:first-child:before { display: none; } .treeview, .treeview ul { margin:0; padding:0; list-style:none; color: #369; } .treeview ul { margin-left:1em; position:relative } .treeview ul ul { margin-left:.5em } .treeview ul:before { content:""; display:block; width:0; position:absolute; top:0; left:0; border-left:1px solid; /* creates a more theme-ready standard for the bootstrap themes */ bottom:15px; } .treeview li { margin:0; padding:0 1em; line-height:2em; font-weight:700; position:relative } .treeview ul li:before { content:""; display:block; width:10px; height:0; border-top:1px solid; margin-top:-1px; position:absolute; top:1em; left:0 } .tree-indicator { margin-right:5px; cursor:pointer; } .treeview li a { text-decoration: none; color:inherit; cursor:pointer; } .treeview li button, .treeview li button:active, .treeview li button:focus { text-decoration: none; color:inherit; border:none; background:transparent; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; outline: 0; } |
Create an HTML file and below code inside the body tag.
Tags: bootstrap treeview, bootstrap tutorial, bootstrap tutorial for beginner, bootstrap tutorials, how to create bootstrap treeview
