Acabei de visitar esta página http://www.elmastudio.de/ e me perguntei se é possível construir o colapso da barra lateral esquerda com o Bootstrap 3.

Código para recolher a barra lateral a partir da parte superior (apenas telefone):

<button type="button" class="navbar-toggle sidebar-toggle" data-toggle="collapse" data-target=".sidebar-ex1-collapse">
    <span class="sr-only">Sidebar</span>
    <span class="glyphicon glyphicon-check"></span>
</button>

A própria barra lateral tem a classe hidden-xs. Ele é removido com o seguinte js

$('.sidebar-toggle').click(function(){
     $('#sidebar').removeClass('hidden-xs');            
});

Se você clicar no botão, ele alterna a barra lateral do topo. É ótimo ver a barra lateral se comportar como o site acima mostra. Qualquer ajuda é apreciada!

Bootstrap 3

Sim é possivel. Este exemplo "fora da tela" deve ajudar você a começar.

https://codeply.com/p/esYgHWB2zJ

Basicamente, você precisa envolver o layout em uma div externa e usar consultas de mídia para alternar o layout em telas menores.

/* 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;
  }
}

Além disso, existem vários outros exemplos da barra lateral do Bootstrap aqui

Bootstrap 4

Criar uma "gaveta" de barra lateral de navegação responsiva no Bootstrap 4?

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

Este é o exemplo oficial, pode ser melhor para alguns. Ele está na seção de exemplos de experimentos, mas como é oficial, deve ser mantido atualizado com a versão de bootstrap atual.

Parece que eles adicionaram um arquivo css fora da tela usado no exemplo:

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

E algum código JS:

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

EDIT: Eu adicionei mais uma opção para barras laterais de bootstrap.

Na verdade, existem três maneiras pelas quais você pode fazer uma barra lateral bootstrap 3. Tentei manter o código o mais simples possível.

Barra lateral fixa

Aqui você pode ver uma demonstração de uma barra lateral fixa simples que desenvolvi com a mesma altura da página

Barra lateral em uma coluna

Também desenvolvi uma barra lateral de coluna bastante simples que funciona em uma página de duas ou três colunas dentro de um contêiner. Leva o comprimento da coluna mais longa. Aqui você pode ver uma demonstração

painel de controle

Se você pesquisar o painel de bootstrap no Google, poderá encontrar vários painéis adequados, como este . No entanto, a maioria deles requer muita codificação. Eu desenvolvi um painel que funciona sem javascript adicional (próximo ao javascript de bootstrap). Aqui está uma demonstração

Para todos os três exemplos, é claro que você deve incluir os arquivos jquery, bootstrap css, js e theme.css.

Barra deslizante

Se você quiser que a barra lateral se esconda ao pressionar um botão, isso também é possível com apenas um pouco de javascript. Aqui está uma demonstração

Via Angular: usando o ng-classAngular, podemos ocultar e mostrar a barra lateral.

http://jsfiddle.net/DVE4f/359/

<div class="container" style="width:100%" ng-app ng-controller="AppCtrl">
<div class="row">
    <div ng-class="showgraphSidebar ? 'col-xs-3' : 'hidden'" id="colPush" >
        Sidebar
    </div>
    <div ng-class="showgraphSidebar ? 'col-xs-9' : 'col-xs-12'"  id="colMain"  >
        <button  ng-click='toggle()' >Sidebar Toggle</a>
    </div>    
  </div>
</div>

.

function AppCtrl($scope) {
    $scope.showgraphSidebar = false;
    $scope.toggle = function() {
        $scope.showgraphSidebar = !$scope.showgraphSidebar;
    }
}

Não é mencionado no documento, mas a barra lateral esquerda do Bootstrap 3 é possível usando o método "Collapse".

Conforme mencionado por bootstrap.js:

Collapse.prototype.dimension = function () {
    var hasWidth = this.$element.hasClass('width')
    return hasWidth ? 'width' : 'height'
  }

Isso significa que, adicionar a classe "largura" no destino, irá expandir pela largura em vez da altura:

http://jsfiddle.net/2316sfbz/2/