Bootstrap Snippet left sidebar bootstrap using HTML CSS jQuery

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.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<button> <i class="fa fa fa-th-large" >-india-7615949353 </i></button>
  
<div class="sidebar left ">
  <ul class="list-sidebar bg-defoult">
    <!--<li class="nav-header "> <span> <img alt="image" class="img-circle" src="http://placehold.it/150x150"> </span>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
        <li><a href="#">Regular link</a></li>
        <li class="disabled"><a href="#">Disabled link</a></li>
        <li><a href="#">Another link</a></li> 
      </ul> -->
    </li>
    <li> <a href="#" data-toggle="collapse" data-target="#dashboard" class="collapsed active" > <i class="fa fa-th-large"></i> <span class="nav-label"> Dashboards </span> <span class="fa fa-chevron-left pull-right"></span> </a>
      <ul class="sub-menu collapse" id="dashboard">
        <li class="active"><a href="#">CSS3 Animation</a></li>
        <li><a href="#">General</a></li>
        <li><a href="#">Buttons</a></li>
        <li><a href="#">Tabs & Accordions</a></li>
        <li><a href="#">Typography</a></li>
        <li><a href="#">FontAwesome</a></li>
        <li><a href="#">Slider</a></li>
        <li><a href="#">Panels</a></li>
        <li><a href="#">Widgets</a></li>
        <li><a href="#">Bootstrap Model</a></li>
      </ul>
    </li>
    <li> <a href="#"><i class="fa fa-diamond"></i> <span class="nav-label">Layouts</span></a> </li>
    <li> <a href="#" data-toggle="collapse" data-target="#products" class="collapsed active" > <i class="fa fa-bar-chart-o"></i> <span class="nav-label">Graphs</span> <span class="fa fa-chevron-left pull-right"></span> </a>
      <ul class="sub-menu collapse" id="products">
        <li class="active"><a href="#">CSS3 Animation</a></li>
        <li><a href="#">General</a></li>
        <li><a href="#">Buttons</a></li>
        <li><a href="#">Tabs & Accordions</a></li>
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
@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
body {
    margin: 0;
}
html, body {
    width: 100%;
    height: 100%
}
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
    display: block;
}
audio, canvas, progress, video {
    display: inline-block;
    vertical-align: baseline;
}
audio:not([controls]) {
    display: none;
    height: 0;
}
a {
    background-color: transparent;
    text-decoration: none;
}
a:active, a:hover {
    outline: 0;
}
h1,h2,h3,h4,h5,h6,p,ul,ol{ margin:0px; padding:0px;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
$(document).ready(function(){
   $('button').click(function(){
       $('.sidebar').toggleClass('fliph');
   });
  
  
   
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"left sidebar bootstrap"
Bootstrap 4.0.0 Snippet by ramniwassharma

Related: See More

Questions / Comments:

"left sidebar bootstrap" Bootstrap 4.0.0 Snippet by ramniwassharma

Related: See More

Questions / Comments:

"left sidebar bootstrap"
Bootstrap 4.0.0 Snippet by ramniwassharma