Collapsing Sidebar With Bootstrap

Answer :

Bootstrap 3

Yes, it's possible. This "off-canvas" example should help to get you started.

https://codeply.com/p/esYgHWB2zJ

Basically you need to wrap the layout in an outer div, and use media queries to toggle the layout on smaller screens.

/* collapsed sidebar styles */ @media screen and (max-width: 767px) {   .row-offcanvas {     position: relative;     -webkit-transition: all 0.25s ease-out;     -moz-transition: all 0.25s ease-out;     transition: all 0.25s ease-out;   }   .row-offcanvas-right   .sidebar-offcanvas {     right: -41.6%;   }    .row-offcanvas-left   .sidebar-offcanvas {     left: -41.6%;   }   .row-offcanvas-right.active {     right: 41.6%;   }   .row-offcanvas-left.active {     left: 41.6%;   }   .sidebar-offcanvas {     position: absolute;     top: 0;     width: 41.6%;   }   #sidebar {     padding-top:0;   } } 

Also, there are several more Bootstrap sidebar examples here

---

Bootstrap 4

Create a responsive navbar sidebar "drawer" in Bootstrap 4?

http://getbootstrap.com/examples/offcanvas/

This is the official example, may be better for some. It is under their Experiments examples section, but since it is official, it should be kept up to date with the current bootstrap release.

Looks like they have added an off canvas css file used in their example:

http://getbootstrap.com/examples/offcanvas/offcanvas.css

And some JS code:

$(document).ready(function () {   $('[data-toggle="offcanvas"]').click(function () {     $('.row-offcanvas').toggleClass('active')   }); }); 

EDIT: I've added one more option for bootstrap sidebars.

There are actually three manners in which you can make a bootstrap 3 sidebar. I tried to keep the code as simple as possible.

Fixed sidebar

Here you can see a demo of a simple fixed sidebar I've developed with the same height as the page

Sidebar in a column

I've also developed a rather simple column sidebar that works in a two or three column page inside a container. It takes the length of the longest column. Here you can see a demo

Dashboard

If you google bootstrap dashboard, you can find multiple suitable dashboard, such as this one. However, most of them require a lot of coding. I've developed a dashboard that works without additional javascript (next to the bootstrap javascript). Here is a demo

For all three examples you off course have to include the jquery, bootstrap css, js and theme.css files.

Slidebar

If you want the sidebar to hide on pressing a button this is also possible with only a little javascript.Here is a demo