CODEWITHSUNDEEP
twitter-bootstrap
Shakeer Hussain
Shakeer Hussain

Reputation: 2526

data-target is not working using bootstrap

Ho friends.

I am using navbar in Bootstarp. for collapsing a div element calling data-toogle and data-target attributes. but i don't find these attributes in my page because of these reason collapse is not working. can some one help what is missing in my code and why these attributes are not showing while typing these attributes.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="../Content/bootstrap.css" rel="stylesheet" />
    <link href="../Content/bootstrap-theme.min.css" rel="stylesheet" />
    <link href="../Content/bootstrap.min.css" rel="stylesheet" />
    <link href="../Content/bootstrap-theme.css" rel="stylesheet" />
    <script src="../Scripts/angular-ui-router.js"></script>
    <script src="../Scripts/angular-ui-router.min.js"></script>
    <script src="../Scripts/Collapse.JS"></script>

</head>
<body>
    <div>
        <nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle"  data-target="#mynavbar" data-toogle="collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse" id="mynavbar">
                <ul class="nav navbar-nav">
                    <li><a href="">Home</a></li>
                    <li><a href="">About</a></li>
                    <li><a href="">Gallery</a></li>
                    <li><a href="">Contact</a></li>
                </ul>
                <ul class="nav navbar-right navbar-nav">
                    <li><a href="#">Login/SignUp</a></li>
                </ul>
            </div>

        </nav>
    </div>
</body>
</html>

Upvotes: 0

Views: 5949

Answers (1)

Steve K
Steve K

Reputation: 9045

You have a typo in your button it says data-toogle it should say data-toggle.

<button type="button" class="navbar-toggle"  data-target="#mynavbar" data-toggle="collapse">

Upvotes: 1

Related Questions