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

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS