bootstrap navbar mobile toggle not working

I loaded bootstrap css and js files and added the html code of following. Both are succesfully loaded - css in head tag and js below footer. Other functions are also working fine.

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container container-header">

  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="{{ url_for('public.home') }}">

      NekTime

    </a>
  </div>
  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
      <li><a href="{{ url_for('public.home') }}">Home</a></li>
      <li><a href="{{ url_for('public.about') }}">About</a></li>
    </ul>
    {% if current_user and current_user.is_authenticated() %}
    <ul class="nav navbar-nav navbar-right">
        <li>
            <p class="navbar-text"><a class="navbar-link" href="{{ url_for('user.members') }}">Logged in as {{ current_user.username }}</a></p>
        </li>
        <li><a class="navbar-link" href="{{ url_for('public.logout') }}"><i class="fa fa-sign-out"></i></a></li>

    </ul>
    {% elif form %}
    <ul class="nav navbar-nav navbar-right">
      <li><a href="{{ url_for('public.register') }}">Create account</a></li>
    </ul>
    <form id="loginForm" method="POST" class="navbar-form form-inline navbar-right" action="/" role="login">
      {{ form.hidden_tag() }}
      <div class="form-group">
        {{ form.username(placeholder="Username", class_="form-control") }}
        {{ form.password(placeholder="Password", class_="form-control") }}
      </div>
      <button type="submit" class="btn btn-default">Log in</button>
    </form>
    {% endif %}
  </div><!-- /.navbar-collapse -->
  </div><!-- /.container -->
</nav>

When I shrink the browser, the toggle button replaces other menus, but I cannot expand that toggle button. I managed to get the right data-target.. i don't know what to do next