content logo

Bootstrap Sidebars:

Bootstrap Hidable Right Sidebar

As you know, sidebars play such a vital role in any website. A properly used Bootstrap sidebar feature will boost your site’s ranking by a generous amount, also increasing the number people visiting your web pages each day. This means, by utilizing such a simple looking feature, you get to benefit from an overall boost to everything on your website. Let’s be honest, who would not want such thing?

With that said, you should also be aware of the fact that designing a proper CSS sidebar is no easy task. In fact, many designers have tried but simply were not satisfied by the result of their work. Even though a sidebar might seem like a simple task in some people’s eyes, there are in fact multiple necessary factors and other principles of designing a menu design for navigating a website. The good news is that you can use this beautiful sidebar we have shown below for absolutely no costs.

#

Sliding Sidebar

#

Beautiful Sidebar

#

Bootstrap Sidebar

#

CSS Sidebar


<!-- This script got from 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://frontendfreecode.com">Free Frontend</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 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;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
$(document).ready(function () {
    $('[data-toggle=offcanvas]').click(function () {
        $('.row-offcanvas').toggleClass('active');
    });
});
</script>

</body>
</html>
Preview