Dropdown login menu in navbar in bootstrap 3?
24,144
I built it back, based on bootstrap 3 drop-down component : http://jsfiddle.net/a2ENF/1/
EDIT AFTER COMMENT
<div class="navbar-collapse collapse">
<div class="navbar-right">
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
Login <span class="caret"></span>
</button>
<div class="dropdown-menu" >
<div class="col-sm-12">
<div class="col-sm-12">
Login
</div>
<div class="col-sm-12">
<input type="text" placeholder="Uname or Email" onclick="return false;" class="form-control input-sm" id="inputError" />
</div>
<br/>
<div class="col-sm-12">
<input type="password" placeholder="Password" class="form-control input-sm" name="password" id="Password1" />
</div>
<div class="col-sm-12">
<button type="submit" class="btn btn-success btn-sm">Sign in</button>
</div>
</div>
</div>
</div>
</div>
</div>
Related videos on Youtube
Author by
eagertoLearn
Updated on July 09, 2022Comments
-
eagertoLearn over 1 year
I am new to using bootstrap 3 and experimenting to get this work. but I am not there quite yet. I want to have dropdown log-in in navbar as shown here. but this is for bootstrap 2.* and does not work in bootstrap 3.
My current attempt here:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>SiteTitle</title> <meta name"viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="keywords" content=""> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"</script> <script> $(document).ready(function() { //Handles menu drop down $('.dropdown-menu').find('form').click(function (e) { e.stopPropagation(); }); }); </script> <style> .navbar .nav > li > .dropdown-menu::before { position: absolute; top: -7px; left: 9px; display: inline-block; border-right: 7px solid transparent; border-bottom: 7px solid #CCC; border-left: 7px solid transparent; border-bottom-color: rgba(0, 0, 0, 0.2); content: ''; } .navbar .nav > li > .dropdown-menu::after { position: absolute; top: -6px; left: 10px; display: inline-block; border-right: 6px solid transparent; border-bottom: 6px solid white; border-left: 6px solid transparent; content: ''; } </style> </head> <body> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" id="register" data-toggle="dropdown">Login <b class="caret"></b></a> <div class="dropdown-menu" style="width: 400px"> <form style="margin: 0px" accept-charset="UTF-8" action="/sessions" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="4L/A2ZMYkhTD3IiNDMTuB/fhPRvyCNGEsaZocUUpw40=" /></div> <fieldset class='textbox' style="padding:10px"> <input style="margin-top: 8px" type="text" placeholder="Username" /> <input style="margin-top: 8px" type="password" placeholder="Passsword" /> <input class="btn-primary" name="commit" type="submit" value="Log In" /> </fieldset> </form> </div> <!-- /dropdown-menu --> </li> <!-- /dropdown --> <!--(here goes another dropdown)--> </ul> </div><!-- /navbar-collapse --> </body> </html>
It isn't like what is above;
How to fix this. or any link to code snippet that works with bootstrap 3 would be nice Thanks
-
eagertoLearn over 9 yearsI am looking for something similar to this i.stack.imgur.com/Us1oC.png. what you provided is inline form. but something on this post with carets at right position
-
Yooz over 9 yearsI edited the code to match your example. the screenshot in your question is confusing thought. jsfiddle.net/a2ENF/1 note that I had to recreate wit CSS the arrow on the menu as it does not exit in bootstrap 3. Put the navbar in black for more consistency
-
eagertoLearn over 9 yearsGod. you are a Bootstrap expert. This is wonderful. If I want to have fields "forgot password" and "keep me logged in" fields, how to get that. one other related question though. I want a registration form of this i.stack.imgur.com/Us1oC.png. can you help with that? Thanks a ton
-
Yooz over 9 yearsThanks, the fiddle for the registration form : jsfiddle.net/a2ENF/3. and a login form with remember me and forgot password : jsfiddle.net/a2ENF/4