data-toggle and data-target not working in bootstrap
css, html, jquery
Solution
I fixed your code: JSFiddle
You just forgot some parts like `data-toggle="modal"` or the two divs i added `<div class="modal-dialog"><div class="modal-content"></div></div>`.
By the way, if you want a button in a navbar there is a class for that:
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
Problem
I am using bootstrap to develop a navbar and on that navbar there are two buttons one for login and other for sign up. I want that when user clicks login a modal pop up fires up and when signup is clicked the user to be redirected to another page. Below is my code but it seems to me that it is not working. I tried to use anchor tag and setting class to `btn btn-primary` but then the button becomes very large and `btn-sm` class has no effect on size. ``` <div class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li class="navbar-btn"><button id="loginbutton" type="button" class="btn btn-primary" data-target=".modal"><i class="glyphicon glyphicon-log-in"></i>Login</button></li> <li class=" navbar-btn"><button type="button" class="btn btn-success"><i class="glyphicon glyphicon-link"></i><a href="./register.jsp">Create account</a></button></li> </ul> </div> <!-- Modal --> <div id="login" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3>Login</h3> </div> <div class="modal-body"> <form class="form-horizontal" role="form" action="login" method="post"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input name="email" type="email" class="form-control" id="inputEmail3" placeholder="Email"> </div> </div> <div class="form-group"> <label for="inputPassword3" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input name="password" type="password" class="form-control" id="inputPassword3" placeholder="Password"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10 pull-right"> <button type="submit" class="btn btn-default">Sign in</button> </div> </div> </form> </div> </div> ```