title: How to implement Bootstrap Sidebar in MVC 5
body: <p>I am wanting to implement a navigation sidebar in <code>MVC 5</code>, but I couldn't find any built in classes in the <code>Bootstrap 3</code>that came with the project. I've tried with the following code:</p>
  
  <p><strong>_Layout.cshtml</strong></p>
  
  <pre><code>&lt;body&gt;
  //the sidebar code is here...
  &lt;div id="Wrapper"&gt;
      &lt;ul&gt;
          &lt;li&gt;hello&lt;/li&gt;
          &lt;li&gt;Project&lt;/li&gt;
          &lt;li&gt;Account settings&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class="navbar navbar-default navbar-fixed-top"&gt;
      &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt;
              &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="navbar-collapse collapse"&gt;
              &lt;ul class="nav navbar-nav"&gt;
                  &lt;li&gt;@Html.ActionLink("Home", "Index", "Home")&lt;/li&gt;
                  &lt;li&gt;@Html.ActionLink("About", "About", "Home")&lt;/li&gt;
                  &lt;li&gt;@Html.ActionLink("Contact", "Contact", "Home")&lt;/li&gt;
              &lt;/ul&gt;
              @Html.Partial("_LoginPartial")
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="container body-content" id="page-content-wrapper"&gt;
      @RenderBody()
      &lt;hr /&gt;
      &lt;footer&gt;
          &lt;p&gt;&amp;copy; @DateTime.Now.Year/p&gt;
      &lt;/footer&gt;
  &lt;/div&gt;
  
  @Scripts.Render("~/bundles/jquery")
  @Scripts.Render("~/bundles/bootstrap")
  &lt;link href="~/Content/Custom.css" rel="stylesheet" /&gt;
  @RenderSection("scripts", required: false)
  </code></pre>
  
  <p></p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#Wrapper {
  background-color: #3F51B5;
  z-index:1;
  height: 100%;
  width:300px;
  position:fixed;
  }
  
  #page-content-wrapper{
  margin-left:300px;
  }
  </code></pre>
  
  <p>So far, what I've done is that I put a <code>margin-left: 300px</code> to the page content and add a <code>&lt;div id="Wrapper"&gt;</code> to encapsulate the side navigation bar and have styling to it. The results I get is as below:</p>
  
  <p><a href="https://i.stack.imgur.com/AgeNx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AgeNx.png" alt="enter image description here"></a></p>
  
  <p>However, I found out these problems with this implementation:</p>
  
  <ol>
  <li>If I put the side menu in the <code>_Layout.cshtml</code> means that every page will have that side menu . But I would like the side menu to appear only when a user logged in.</li>
  <li>If I put the side menu in each individual <code>View</code>, this will cause the ugly white space at the left side of the page since every <code>View</code> is rendered in <code>@RenderBody()</code>.</li>
  <li>If I put the side menu in the <code>_Layout.cshtml</code>, how do I include the <code>jQuery</code> code to toggle and hide the side menu when a button is clicked?</li>
  </ol>
  
  <p>Is there any better implementation of this?</p>