title: Side navbar in bootstrap not working with demo
body: <p>I'm using this code to try and get a side nav bar:</p>
  
  <p><a href="http://bootsnipp.com/snippets/z4Q2r" rel="nofollow noreferrer">http://bootsnipp.com/snippets/z4Q2r</a></p>
  
  <p>When I copy and paste this into my app what happens is the left nav bar is only as tall as the number of links, and the content area starts after the left nav bar div instead of on top. I have the same css so not sure why it would be doing this. Since this demo doesn't show the entire html I feel it's assuming something I don't have.</p>
  
  <p>index.htm</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;script src="Scripts/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="Scripts/angular-route.min.js"&gt;&lt;/script&gt;
      &lt;script src="Scripts/angular-animate.min.js"&gt;&lt;/script&gt;
  
      &lt;script src="Scripts/jquery-3.1.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="Scripts/bootstrap.min.js"&gt;&lt;/script&gt;
  
      &lt;link rel="stylesheet" href="Content/Site.css"&gt;
      &lt;link href="Content/bootstrap.min.css" rel="stylesheet" /&gt;
  
      &lt;!-- this is key for angular routing with pretty urls --&gt;
      &lt;base href="/"&gt;
  
      &lt;title&gt;Toolbox Data Entry&lt;/title&gt;
      &lt;meta charset="utf-8" /&gt;
  &lt;/head&gt;
  &lt;body ng-app="myApp" ng-controller="myController"&gt;
  
  
      &lt;div class="navbar navbar-inverse navbar-fixed-left"&gt;
          &lt;a class="navbar-brand" href="#"&gt;Brand&lt;/a&gt;
          &lt;ul class="nav navbar-nav"&gt;
              &lt;li class="dropdown"&gt;
                  &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Dropdown &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                  &lt;ul class="dropdown-menu" role="menu"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Sub Menu1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Sub Menu2&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Sub Menu3&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="divider"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Sub Menu4&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Sub Menu5&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Link2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Link3&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Link4&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Link5&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;h2&gt;Left side Navigation bar (Fixed)&lt;/h2&gt;
  
              &lt;p&gt;Left side Navigation&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- defines the routes to views/controllers --&gt;
      &lt;script src="App.js"&gt;&lt;/script&gt;
  
      &lt;!-- the controller names linked to views above are defined in the scripts below --&gt;
      &lt;script src="ScriptControllers/TestController.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Site.css</p>
  
  <pre><code>.navbar-fixed-left {
    width: 140px;
    position: fixed;
    border-radius: 0;
    height: 100%;
  }
  
  .navbar-fixed-left .navbar-nav &gt; li {
    float: none;  /* Cancel default li float: left */
    width: 139px;
  }
  
  .navbar-fixed-left + .container {
    padding-left: 160px;
  }
  
  /* On using dropdown menu (To right shift popuped) */
  .navbar-fixed-left .navbar-nav &gt; li &gt; .dropdown-menu {
    margin-top: -50px;
    margin-left: 140px;
  }
  </code></pre>