title: position sidebar in bootstrap
body: <p>I am trying to get this sidebar in the right handside instead of the lefthandside, what should I do? I have tried almost everything, but I cannot really turn it in my head :-/ Everytime I think I am on the correct track, something is not working. </p>
  
  <p><a href="http://blackrockdigital.github.io/startbootstrap-simple-sidebar/" rel="nofollow">SIdebar</a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="wrapper"&gt;
    &lt;!-- Sidebar --&gt;
    &lt;div id="sidebar-wrapper"&gt;
      &lt;ul class="sidebar-nav"&gt;
        &lt;li class="sidebar-brand"&gt;
          &lt;a href="#"&gt;
          Start Bootstrap
          &lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;Dashboard&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;Shortcuts&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;Overview&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;Events&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;About&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;Services&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="#"&gt;Contact&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;!-- /#sidebar-wrapper --&gt;
    &lt;!-- Page Content --&gt;
    &lt;div id="contentcontainer"&gt;
      &lt;div class="container-fluid"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-lg-3 bg-danger"&gt;
            &lt;h1&gt;Simple Sidebar&lt;/h1&gt;
            &lt;p&gt;This templaate has a respThis tThis template has a responte has a respTate has a respThis tThis template has a responhis tThis template has a responsive menu toggling system. emplate has a responsive menu toggling system. onsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.&lt;/p&gt;
            &lt;p&gt;Make surThis template has a responsive menu toggling system. e to keep all page content wThis template has a responsive menu toggling system. ithin the &lt;code&gt;#page-content-wrapper&lt;/code&gt;.&lt;/p&gt;
            &lt;a href="#menu-toggle" class="btn btn-default" id="menu-toggle"&gt;Toggle Menu&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- /#page-content-wrapper --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>    /*!
   * Start Bootstrap - Simple Sidebar HTML Template (http://startbootstrap.com)
   * Code licensed under the Apache License v2.0.
   * For details, see http://www.apache.org/licenses/LICENSE-2.0.
   */
  
  /* Toggle Styles */
  
  #wrapper {
       padding-right: 0;
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease;
  }
  
  #wrapper.toggled {
       padding-right: 0;
  }
  
  #sidebar-wrapper {
      z-index: 1000;
      position: fixed;
      right:0;
      width: 0;
      height: 100%;
      margin-left: -250px;
      overflow-y: auto;
      background: #000;
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 0.5s ease;
  }
  
  #wrapper.toggled #sidebar-wrapper {
      width: 250px;
  }
  
  #page-content-wrapper {
      width: 100%;
      position: absolute;
      padding: 15px;
  }
  
  #wrapper.toggled #page-content-wrapper {
      position: absolute;
      padding-left: 0;
  }
  
  /* Sidebar Styles */
  
  .sidebar-nav {
      position: absolute;
      top: 0;
      width: 250px;
      margin: 0;
      padding: 0;
      list-style: none;
  }
  
  .sidebar-nav li {
      text-indent: 20px;
      line-height: 40px;
  }
  
  .sidebar-nav li a {
      display: block;
      text-decoration: none;
      color: #999999;
  }
  
  .sidebar-nav li a:hover {
      text-decoration: none;
      color: #fff;
      background: rgba(255,255,255,0.2);
  }
  
  .sidebar-nav li a:active,
  .sidebar-nav li a:focus {
      text-decoration: none;
  }
  
  .sidebar-nav &gt; .sidebar-brand {
      height: 65px;
      font-size: 18px;
      line-height: 60px;
  }
  
  .sidebar-nav &gt; .sidebar-brand a {
      color: #999999;
  }
  
  .sidebar-nav &gt; .sidebar-brand a:hover {
      color: #fff;
      background: none;
  }
  
  @media(min-width:768px) {
      #wrapper {
          padding-left: 0;
      }
  
      #wrapper.toggled {
          padding-left: 0;
      }
  
      #sidebar-wrapper {
          width: 180px;
      }
  
      #wrapper.toggled #sidebar-wrapper {
          width: 0;
      }
  
      #page-content-wrapper {
          padding: 20px;
          position: relative;
      }
  
      #wrapper.toggled #page-content-wrapper {
          position: relative;
          margin-right: 0;
      }
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>&lt;!-- Menu Toggle Script --&gt;
      &lt;script&gt;
      $("#menu-toggle").click(function(e) {
          e.preventDefault();
          $("#wrapper").toggleClass("toggled");
      });
      &lt;/script&gt;
  </code></pre>