title: Closing an open collapsed navbar when clicking outside in Booststrap 4
body: <p>I'm currently using Bootstrap 4 and I would like to close a collapsed navbar when clicking outside. It can only be close when you click the toggle button. </p>
  
  <p>Also, there's a problem with the nav-links when I'm clicking the toggle button. After it opens, nav-links are bouncing up. I'm not able to figure out the cause. Kindly please someone help me with my problem. Thank you!</p>
  
  <p>Here's my code: </p>
  
  <pre><code>&lt;body&gt;
   &lt;!--  start navbar --&gt;
   &lt;nav class="navbar navbar-light bg-faded navbar-fixed-top"&gt;
    &lt;button class="navbar-toggler hidden-lg-up float-xs-right" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"&gt;&lt;/button&gt;
      &lt;a class="navbar-brand" href="#"&gt;&lt;/a&gt;
  
      &lt;div class="collapse navbar-toggleable-md" id="main-navbar"&gt;
        &lt;ul class="nav navbar-nav float-lg-right"&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="#home"&gt;Home&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="#section-about"&gt;About&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="#section-portfolio"&gt;Portfolio&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="#section-contact"&gt;Contact&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="#resume"&gt;Resume&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
    &lt;!--   end navbar --&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Here's my codepen link: </p>
  
  <p><a href="http://codepen.io/marcvs/pen/jVONGM" rel="nofollow noreferrer">http://codepen.io/marcvs/pen/jVONGM</a></p>