The navbar menu is used in header or footer and in many cases in the content also. It is responsive by default in bootstrap and take size according to screen size.
The navbar get collapsed in case of small devices like mobile phones and there is some icon on clicking of which the navbar menu can be closed or open.
bootstrap javascript is needed to collapse the navbar menu.  Sometimes we don’t need javascript file to collapse navbar menu.  There is a way by which you can can collapse bootstrap navbar without using javascript. Here is the example:

HTML:

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<input type="checkbox" id="navbar-toggle-check>
<div class="navbar-header">
<label for="navbar-toggle-check class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</label>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
</ul>
</div>
</div>
</nav>

CSS:

#navbar-toggle-check {
  display:none
}
#navbar-toggle-check:checked ~ .collapse {
    display: block;
}

In this example we have added a checkbox and hide it by using css. The button is replaced by label and we connect the label to checkbox by giving for attribute. And on the basis of checkbox condition the navbar toggles.