Bootstrap - Angular Layout

Just to exemplify a layout

by douglasloyo

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/sandstone/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://rawgithub.com/angular-ui/angular-ui/master/build/angular-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-sortable/0.13.4/sortable.min.js"></script>
<header>Header</header>
<div class="container" ng-app="myApp" ng-controller="homeController">
    <div class="row">
        <div class="col-md-2 col-sm-2 col-xs-2 no-float sidebar-container">
          <div class="sidebar">
              Sidebar
              <ul class="nav">
                <li ng-repeat="i in myArray"><a href="#">ItemWithLongDescriptionsThatSpanLong{{i}}</a></li>
              </ul>
          </div>
        </div>
        <div class="col-md-10 col-sm-10 col-xs-10 no-float">Content</div>
    </div>
</div>

CSS

html,body,.container {
    height:100%;
}
.container {
    display:table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0; /*set left/right padding according to needs*/
    box-sizing: border-box;
}
header {
    background: white;
    height: 50px;
    border-bottom:1px solid #cacaca;
}

.row {
    height: 100%;
    display: table-row;
}

.row .no-float {
  display: table-cell;
  float: none;
}
.sidebar-container
{
  padding-right:0;
  background-color: #f5f5f5;
    border-right: 1px solid #cacaca;
}
.sidebar{
  height:100%; 
  width:100%;
  overflow-y:auto;
  overflow-x:hidden;
  background-color: #f5f5f5;
}

.sidebar a {
   position:relative;
    width:140px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    display:inline-block;
}

.sidebar > li > a {
  padding-right: 20px;
  padding-left: 20px;
}

.nav>li>a:active,
.nav>li>a:hover,
.nav>li>a:focus {
  color: #fff;
  background-color: #428bca;
}

JavaScript

/* Application */
var myApp = angular.module('myApp', ['ui', 'ui.sortable']);

myApp.controller('homeController', function ($scope, $http) {
	var ctrl = this;
  
  $scope.myArray = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30];
 
});