title: Bootstrap - collapsed sidebar by default
body: <p>I have a project based on bootstrap 3.3.7. What I'm trying to achieve is to have a toggle button connected to sidebar. So when a user clicks the button, a sidebar shows from the left. This is the code which I currently have:</p>
  <p>HTML:</p>
  <pre><code>&lt;div class=&quot;wrapper&quot;&gt;
    &lt;!-- Sidebar Holder --&gt;
    &lt;nav id=&quot;sidebar&quot;&gt;
    
      &lt;div class=&quot;sidebar-header&quot;&gt;
        &lt;h3&gt;Test&lt;/h3&gt;
        
      &lt;/div&gt;
  
      &lt;ul class=&quot;list-unstyled components&quot;&gt;
        &lt;p&gt;Dummy Heading&lt;/p&gt;
        &lt;li class=&quot;active&quot;&gt;
          &lt;a href=&quot;#homeSubmenu&quot; data-toggle=&quot;collapse&quot; aria-expanded=&quot;false&quot;&gt;Home&lt;/a&gt;
          &lt;ul class=&quot;collapse list-unstyled&quot; id=&quot;homeSubmenu&quot;&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home 1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home 2&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home 3&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;ul class=&quot;list-unstyled CTAs&quot;&gt;
        &lt;li&gt;&lt;a href=&quot;https://bootstrapious.com/p/bootstrap-sidebar&quot; class=&quot;article&quot;&gt;Back to the article&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
  
    &lt;!-- Page Content Holder --&gt;
    &lt;div id=&quot;content&quot;&gt;
            &lt;button type=&quot;button&quot; id=&quot;sidebarCollapse&quot; class=&quot;btn btn-info navbar-btn&quot;&gt;
                                  &lt;i class=&quot;glyphicon glyphicon-align-left&quot;&gt;&lt;/i&gt;
                                  
                              &lt;/button&gt;
        &lt;div class=&quot;container-fluid&quot;&gt;
      &lt;h2&gt;Collapsible Sidebar Using Bootstrap 3&lt;/h2&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  <p>JS:</p>
  <pre><code>$(document).ready(function() {
    $(&quot;#sidebarCollapse&quot;).on(&quot;click&quot;, function() {
      $(&quot;#sidebar&quot;).toggleClass(&quot;active&quot;);
      $(this).toggleClass(&quot;active&quot;);
    });
  });
      
  </code></pre>
  <p>CSS:</p>
  <pre><code>.navbar {
    padding: 15px 10px;
    background: #fff;
    border: none;
    border-radius: 0;
    margin-bottom: 40px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
  }
  
  .navbar-btn {
    box-shadow: none;
    outline: none !important;
    border: none;
  }
  
  .line {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #ddd;
    margin: 40px 0;
  }
  
  
  /* ---------------------------------------------------
      SIDEBAR STYLE
  ----------------------------------------------------- */
  
  .wrapper {
    display: flex;
    align-items: stretch;
  }
  
  #sidebar {
    min-width: 250px;
    max-width: 250px;
    background: #7386D5;
    color: #fff;
    transition: all 0.3s;
  }
  
  #sidebar a,
  #sidebar a:hover,
  #sidebar a:focus {
    color: inherit;
  }
  
  #sidebar.active {
    margin-left: -250px;
  }
  
  #sidebar .sidebar-header {
    padding: 20px;
    background: #6d7fcc;
  }
  
  #sidebar ul.components {
    padding: 20px 0;
    border-bottom: 1px solid #47748b;
  }
  
  #sidebar ul p {
    color: #fff;
    padding: 10px;
  }
  
  #sidebar ul li a {
    padding: 10px;
    font-size: 1.1em;
    display: block;
  }
  
  #sidebar ul li a:hover {
    color: #7386D5;
    background: #fff;
  }
  
  #sidebar ul li.active &gt; a,
  a[aria-expanded=&quot;true&quot;] {
    color: #fff;
    background: #6d7fcc;
  }
  
  a[data-toggle=&quot;collapse&quot;] {
    position: relative;
  }
  
  a[aria-expanded=&quot;false&quot;]::before,
  a[aria-expanded=&quot;true&quot;]::before {
    content: '\e259';
    display: block;
    position: absolute;
    right: 20px;
    font-family: 'Glyphicons Halflings';
    font-size: 0.6em;
  }
  
  a[aria-expanded=&quot;true&quot;]::before {
    content: '\e260';
  }
  
  ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
    background: #6d7fcc;
  }
  
  ul.CTAs {
    padding: 20px;
  }
  
  ul.CTAs a {
    text-align: center;
    font-size: 0.9em !important;
    display: block;
    border-radius: 5px;
    margin-bottom: 5px;
  }
  
  a.download {
    background: #fff;
    color: #7386D5;
  }
  
  a.article,
  a.article:hover {
    background: #6d7fcc !important;
    color: #fff !important;
  }
  
  
  /* ---------------------------------------------------
      CONTENT STYLE
  ----------------------------------------------------- */
  
  #content {
    padding: 20px;
    min-height: 100vh;
    transition: all 0.3s;
  }
  
  #content p a {
    color:
  }
  
  
  /* ---------------------------------------------------
      MEDIAQUERIES
  ----------------------------------------------------- */
  
  @media (max-width: 768px) {
    #sidebar {
      margin-left: -250px;
    }
    #sidebar.active {
      margin-left: 0;
    }
  }
  </code></pre>
  <p>The code works but I do have an issue - I want to have the sidebar hidden all the time. So only a click on the button shows it. I have went through a bootstrap docs yet there is no class/info how to enhance this code with such functionality.</p>
  <p>thanks for any hints..</p>