title: Toggling overlayed sidebar in Bootstrap
body: <p>I use Bootstrap.</p>
  
  <p>I have some text inputs to filter some data on my page.</p>
  
  <p>How can I put these input fields in a hidden sidebar which is shown when I click on a toggler in the navbar? The sidebar should be overlayed and have full height.</p>
  
  <p>I guess I can just use a <code>&lt;div&gt;</code> element with position absolute, height 100%, width 300px, top 0 and right 0, but I don't know how to toggle it from a button in the navbar. Besides, if the toggle button is in the right in the navbar, the sidebar will become overlayed on the button, so I cannot hide it again. The sidebar also has to be hidden if I click outside of the sidebar. I have looked through the bootstrap documentation, but there is no examples of this scenario.</p>