html - position sidebar in bootstrap -

i trying sidebar in right handside instead of lefthandside, should do? have tried everything, cannot turn in head :-/ everytime think on correct track, not working.

sidebar

html:

<div id="wrapper">   <!-- sidebar -->   <div id="sidebar-wrapper">     <ul class="sidebar-nav">       <li class="sidebar-brand">         <a href="#">         start bootstrap         </a>       </li>       <li>         <a href="#">dashboard</a>       </li>       <li>         <a href="#">shortcuts</a>       </li>       <li>         <a href="#">overview</a>       </li>       <li>         <a href="#">events</a>       </li>       <li>         <a href="#">about</a>       </li>       <li>         <a href="#">services</a>       </li>       <li>         <a href="#">contact</a>       </li>     </ul>   </div>   <!-- /#sidebar-wrapper -->   <!-- page content -->   <div id="contentcontainer">     <div class="container-fluid">       <div class="row">         <div class="col-lg-3 bg-danger">           <h1>simple sidebar</h1>           <p>this templaate has respthis tthis template has responte has resptate has respthis tthis template has responhis tthis template has responsive menu toggling system. emplate has responsive menu toggling system. onsive menu toggling system. menu appear collapsed on smaller screens, , appear non-collapsed on larger screens. when toggled using button below, menu appear/disappear. on small screens, page content pushed off canvas.</p>           <p>make surthis template has responsive menu toggling system. e keep page content wthis template has responsive menu toggling system. ithin <code>#page-content-wrapper</code>.</p>           <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">toggle menu</a>         </div>       </div>     </div>   </div>   <!-- /#page-content-wrapper --> </div> 

css:

    /*!  * start bootstrap - simple sidebar html template (http://startbootstrap.com)  * code licensed under apache license v2.0.  * details, see http://www.apache.org/licenses/license-2.0.  */  /* toggle styles */  #wrapper {      padding-right: 0;     -webkit-transition: 0.5s ease;     -moz-transition: 0.5s ease;     -o-transition: 0.5s ease;     transition: 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: 0.5s ease;     -moz-transition: 0.5s ease;     -o-transition: 0.5s ease;     transition: 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 {     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 > .sidebar-brand {     height: 65px;     font-size: 18px;     line-height: 60px; }  .sidebar-nav > .sidebar-brand {     color: #999999; }  .sidebar-nav > .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;     } } 

js:

<!-- menu toggle script -->     <script>     $("#menu-toggle").click(function(e) {         e.preventdefault();         $("#wrapper").toggleclass("toggled");     });     </script> 

you can following way:

change padding-right: 250px; padding-left: 0; in #wrapper , in toggle.

#wrapper.toggled {     padding-right: 0; } 

#sidebar-wrapper should right: 0; instead of left: 250px;.

then change margin-right: 250px; in #wrapper.toggled #page-content-wrapper.

and change to

@media(min-width:768px) {     #wrapper {         padding-left: 0;     } 

working fiddle