Jasny Bootstrap Change

I was looking for a sidebar to my admin template and I wanted to use jasnybootstrap. My goal was to resize the content and do not translate out of the screen. A similar effect is

Solution 1:

I have made it using CSS.

#myNavmenu ~ .container {
   padding-left: 10px;
}

#myNavmenu.canvas-slid ~ .container {
   padding-left: 320px;
}

http://jsfiddle.net/k9K5d/14/

I have made it using Jquery.

http://jsfiddle.net/k9K5d/15/// JS

$(".navbar-toggle").click(function(e) {
    e.preventDefault();
    $(".container").toggleClass("slide");
});

// CSS

.container.slide {
  padding-left: 10px;
}

.container {
  padding-left: 320px;
}

http://jsfiddle.net/k9K5d/15/

You just need to make a change in padding-left property for class 'container'.