content logo
Bootstrap Sidebars: Bootstrap Hidable Right Sidebar

Side bars are often used for different purposes, as a menu or as a section of the latest content. In this code we have a sidebar on the right side of the website page. This sidebar is opened and closed by a button. This button is fixed to the sidebar. The sidebar is made up of two boxes, each with a number of links. This sidebar is often a good option for placing links to the latest content.

#Sliding Sidebar #Beautiful Sidebar #Bootstrap Sidebar #CSS Sidebar
<!-- this script got from www.frontendfreecode.com -->
<div class="navbar navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> </div> </div> <div class="container-fluid"> <div class="row row-offcanvas"> <div class="sidebar-offcanvas sidebar"> <div class="panel panel-default"> <div class="panel-heading">Widget</div> <div class="panel-body"> <p><a href="#"><i class="glyphicon glyphicon-check"></i> Action item</a></p> <p><a href="#"><i class="glyphicon glyphicon-unchecked"></i> Action item</a></p> <p class=""><a href="#"><i class="glyphicon glyphicon-plus"></i> Action item</a></p> <p class=""><a href="#"><i class="glyphicon glyphicon-minus"></i> Action item</a></p> <p><a href="#"><i class="glyphicon glyphicon-plus"></i> Action item</a></p> <p><a href="#"><i class="glyphicon glyphicon-list"></i> Action item</a></p> </div> </div><!--/.panel--> <div class="panel panel-default"> <div class="panel-heading">Widget</div> <div class="panel-body"> <p><a href="#"><i class="glyphicon glyphicon-check"></i> Action item</a></p> <p><a href="#"><i class="glyphicon glyphicon-unchecked"></i> Action item</a></p> <p class=""><a href="#"><i class="glyphicon glyphicon-plus"></i> Action item</a></p> <p class=""><a href="#"><i class="glyphicon glyphicon-minus"></i> Action item</a></p> <p><a href="#"><i class="glyphicon glyphicon-plus"></i> Action item</a></p> <p><a href="#"><i class="glyphicon glyphicon-list"></i> Action item</a></p> </div> </div><!--/.panel--> </div><!-- /.cols--> <div class="content"> <p class="pull-right"> <a type="button" class="btn btn-collapse btn-sm" data-toggle="offcanvas"><i class="glyphicon glyphicon-chevron-down"></i> Sidebar</a> </p> <div class="text-center"> <h1>Bootstrap collapsible sidebar</h1> <p class="lead"> Example of a page with collapsible sidebar which is hidding by default on mobile screen. </p> </div> <div class="row"> <div class="col-md-3"> <div class="thumbnail"> <div class="caption"> <h3>Thumbnail label</h3> <p>blah blah</p> <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> </div> </div><!--/.thumbnail--> </div><!--/.col-3--> <div class="col-md-3"> <div class="thumbnail"> <div class="caption"> <h3>Thumbnail label</h3> <p>blah blah</p> <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> </div> </div><!--/.thumbnail--> </div><!--/.col-3--> <div class="col-md-3"> <div class="thumbnail"> <div class="caption"> <h3>Thumbnail label</h3> <p>blah blah</p> <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> </div> </div><!--/.thumbnail--> </div><!--/.col-3--> <div class="col-md-3"> <div class="thumbnail"> <div class="caption"> <h3>Thumbnail label</h3> <p>blah blah</p> <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> </div> </div><!--/.thumbnail--> </div><!--/.col-3--> </div><!--/.row--> </div><!-- /.cols--> </div><!-- /.row--> </div><!-- /.container --><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Code</a>
/* Variables */
/* Mixins*/
/* Style tweaks */
html,
body {
  overflow-x: hidden;
  /* Prevent scroll on narrow devices */
  height: 100%;
}
body {
  padding-top: 70px;
}
/* Off Canvas */
@media screen and (min-width: 768px) {
  .row-offcanvas {
    position: relative;
    right: 25%;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
  }
  .row-offcanvas.active {
    right: 0;
    /* 3 columns */
  }
  .row-offcanvas.active .content {
    width: 100%;
    /* 12 columns */
  }
  .row-offcanvas .content {
    width: 75%;
    /* 9 columns */
    float: right;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
  }
  .row-offcanvas .sidebar-offcanvas {
    position: absolute;
    top: 0;
    width: 25%;
    /* 3 columns */
    right: -25%;
    /* 3 columns */
  }
}
@media screen and (max-width: 767px) {
.row-offcanvas {
    right: 0;
    position: relative;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.row-offcanvas.active {
    right: 50%;

}
.sidebar-offcanvas {
    position: absolute;
    top: 0;
    width: 50%;
    right: -50%;
}
}
/* styling the sidebar and the toggle button */
.content {
  position: relative;
}
.sidebar {
  background: rgba(51, 122, 183, 0.09);
  padding: 10px 15px;
  margin-top: -20px;
  border-radius: 0 0 0 5px;
}
.btn-collapse {
  position: absolute;
  padding: 8px 12px;
  border-radius: 5px 5px 0 0;
  top: 20px;
  right: 0;
  margin-right: -24px;
  background: rgba(51, 122, 183, 0.09);
  transform: rotate(-90deg);
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.row-offcanvas.active .btn-collapse {
  right: 0;
  margin-right: -8px;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.row-offcanvas.active .btn-collapse i {
  transform: rotate(180deg);
}
$(document).ready(function () {
    $('[data-toggle=offcanvas]').click(function () {
        $('.row-offcanvas').toggleClass('active');
    });
});
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"><!-- this script got from www.frontendfreecode.com -->
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
<style>
/* Variables */
/* Mixins*/
/* Style tweaks */
html,
body {
  overflow-x: hidden;
  /* Prevent scroll on narrow devices */
  height: 100%;
}
body {
  padding-top: 70px;
}
/* Off Canvas */
@media screen and (min-width: 768px) {
  .row-offcanvas {
    position: relative;
    right: 25%;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
  }
  .row-offcanvas.active {
    right: 0;
    /* 3 columns */
  }
  .row-offcanvas.active .content {
    width: 100%;
    /* 12 columns */
  }
  .row-offcanvas .content {
    width: 75%;
    /* 9 columns */
    float: right;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
  }
  .row-offcanvas .sidebar-offcanvas {
    position: absolute;
    top: 0;
    width: 25%;
    /* 3 columns */
    right: -25%;
    /* 3 columns */
  }
}
@media screen and (max-width: 767px) {
.row-offcanvas {
    right: 0;
    position: relative;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.row-offcanvas.active {
    right: 50%;

}
.sidebar-offcanvas {
    position: absolute;
    top: 0;
    width: 50%;
    right: -50%;
}
}
/* styling the sidebar and the toggle button */
.content {
  position: relative;
}
.sidebar {
  background: rgba(51, 122, 183, 0.09);
  padding: 10px 15px;
  margin-top: -20px;
  border-radius: 0 0 0 5px;
}
.btn-collapse {
  position: absolute;
  padding: 8px 12px;
  border-radius: 5px 5px 0 0;
  top: 20px;
  right: 0;
  margin-right: -24px;
  background: rgba(51, 122, 183, 0.09);
  transform: rotate(-90deg);
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.row-offcanvas.active .btn-collapse {
  right: 0;
  margin-right: -8px;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.row-offcanvas.active .btn-collapse i {
  transform: rotate(180deg);
}
</style>

</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="row row-offcanvas">

        <div class="sidebar-offcanvas sidebar">

            <div class="panel panel-default">
                <div class="panel-heading">Widget</div>
                <div class="panel-body">
                    <p><a href="#"><i class="glyphicon glyphicon-check"></i> Action item</a></p>
                    <p><a href="#"><i class="glyphicon glyphicon-unchecked"></i> Action item</a></p>
                    <p class=""><a href="#"><i class="glyphicon glyphicon-plus"></i> Action item</a></p>
                    <p class=""><a href="#"><i class="glyphicon glyphicon-minus"></i> Action item</a></p>
                    <p><a href="#"><i class="glyphicon glyphicon-plus"></i> Action item</a></p>
                    <p><a href="#"><i class="glyphicon glyphicon-list"></i> Action item</a></p>
                </div>
            </div><!--/.panel-->
            <div class="panel panel-default">
                <div class="panel-heading">Widget</div>
                <div class="panel-body">
                    <p><a href="#"><i class="glyphicon glyphicon-check"></i> Action item</a></p>
                    <p><a href="#"><i class="glyphicon glyphicon-unchecked"></i> Action item</a></p>
                    <p class=""><a href="#"><i class="glyphicon glyphicon-plus"></i> Action item</a></p>
                    <p class=""><a href="#"><i class="glyphicon glyphicon-minus"></i> Action item</a></p>
                    <p><a href="#"><i class="glyphicon glyphicon-plus"></i> Action item</a></p>
                    <p><a href="#"><i class="glyphicon glyphicon-list"></i> Action item</a></p>
                </div>
            </div><!--/.panel-->
        </div><!-- /.cols-->

        <div class="content">
            <p class="pull-right">
                <a type="button" class="btn btn-collapse btn-sm" data-toggle="offcanvas"><i class="glyphicon glyphicon-chevron-down"></i> Sidebar</a>
            </p>

            <div class="text-center">
                <h1>Bootstrap collapsible sidebar</h1>
                <p class="lead">
                    Example of a page with collapsible sidebar which is hidding by default on mobile screen.
                </p>
            </div>
            <div class="row">
                <div class="col-md-3">
                    <div class="thumbnail">
                        <div class="caption">
                            <h3>Thumbnail label</h3>
                            <p>blah blah</p>
                            <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                        </div>
                    </div><!--/.thumbnail-->
                </div><!--/.col-3-->
                <div class="col-md-3">
                    <div class="thumbnail">
                        <div class="caption">
                            <h3>Thumbnail label</h3>
                            <p>blah blah</p>
                            <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                        </div>
                    </div><!--/.thumbnail-->
                </div><!--/.col-3-->
                <div class="col-md-3">
                    <div class="thumbnail">
                        <div class="caption">
                            <h3>Thumbnail label</h3>
                            <p>blah blah</p>
                            <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                        </div>
                    </div><!--/.thumbnail-->
                </div><!--/.col-3-->
                <div class="col-md-3">
                    <div class="thumbnail">
                        <div class="caption">
                            <h3>Thumbnail label</h3>
                            <p>blah blah</p>
                            <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                        </div>
                    </div><!--/.thumbnail-->
                </div><!--/.col-3-->

            </div><!--/.row-->
        </div><!-- /.cols-->
    </div><!-- /.row-->
</div><!-- /.container -->
<div id="bcl"><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Code</a></div>
<script>
$(document).ready(function () {
    $('[data-toggle=offcanvas]').click(function () {
        $('.row-offcanvas').toggleClass('active');
    });
});
</script>

</body>
</html>
Preview