This is the simplest way to create sidebar slide panel for bootstrap with HTML/CSS and a few lines of JQuery.
Follow the steps to a create slide panel in 5 minutes.

Add following Libraries and file paths to head section of the page:


Lets create HTML for slide panel and content section of the page.

Slide Panel

<div id="slide-panel">
<a href="#" class="btn btn-danger" id="opener"><i class="glyphicon glyphicon-align-justify"></i></a>
Panel Content

Content Section

For content section i am using standard dummy text (filler text) i.e. Lorem lipsum

<article id="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

CSS for styling the slide panel and content area

    overflow: hidden;
#slide-panel {
    float: left;
    max-width: 300px;
#opener {
    margin:-10px -50px 0px 0px;
    height: 500px;
    width: 100%;
    float: left;
padding-left: 5%;


Add JQuery for hide, show and animating the slide panel.

    $('#opener').on('click', function() {	
    var panel = $('#slide-panel');
    if (panel.hasClass("visible")) {
    } else {panel.addClass('visible').animate({'margin-left':'0px'});
      return false;	

GITHUB Repository

Complete source of the plugin available for downloading on github. Feel free to download and contribute on github repository.

2 thoughts on “How to create a sidebar slide panel for bootstrap

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>