Bootstrap 3.0 - Small Grid Layout

by Kyros Koh

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<div class="container" style="width:100%" ng-app ng-controller="AppCtrl">
<div class="row">
    <div ng-class="showgraphSidebar ? 'col-xs-9' : 'col-xs-12'" id="colMain" >
        <button  ng-click='toggle()' >Toggle Sidebar</a>
    </div>
    <div ng-class="showgraphSidebar ? 'col-xs-3' : 'hidden'"
    id="colPush"  >
        Sidebar
    </div>    
  </div>
</div>

CSS

.row div {
    height: 200px;
    
} 
#colPush {
    background-color: #A6BFBA;
}
#colMain {
    background-color: #DE4124;
}

JavaScript

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