Почему не работает кнопка toggle?

Нажимаю на кнопку, но она не разворачивает список

<nav rol="navigation" class="navbar navbar-inverse">
            <div class="navbar-header">                
                <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                    
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>

                </button>

                <div id="navbarCollapse" class="collapse navbar-collapse">
                    <ul class="nav nav-pills">
                        <li class="active"><a href="#">Button1</a></li>
                        <li><a href="#">Button2</a></li>
                        <li><a href="#">Button3</a></li>
                        <li><a href="#">Button4</a></li>
                        <li><a href="#">Button5</a></li>
                    </ul>
                </div>

            </div>
        </nav>