<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <nav class="navbar navbar-default" role="navigation"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li> <button type="button" class="btn btn-default navbar-btn" data-container="body" data-toggle="popover" data-placement="bottom">Login</button> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li> </li> <li> <div class="dropdown"> <button type="button" class="btn btn-default navbar-btn" data-toggle="dropdown">Login</button> <div class="dropdown-menu" style="padding: 10px; background: #ddd"> <form action="" role="form"> <div class="form-group"> <label for="user">User</label> <input type="text" class="form-control" id="user" placeholder="User" /> <label for="password">Password</label> <input type="password" class="form-control" id="password" placeholder="Password" /> </div> <button type="submit" class="btn btn-default">Sign in</button> </form> </div> </div> </li> </ul> </div> <!-- /.navbar-collapse --> </div> </nav> <div id="popover_content_wrapper" style="display: none"> <form action="" role="form"> <div class="form-group"> <label for="user">User</label> <input type="text" class="form-control" id="user" placeholder="User" /> <label for="password">Password</label> <input type="password" class="form-control" id="password" placeholder="Password" /> </div> <button type="submit" class="btn btn-default">Sign in</button> </form> </div> <ul class="nav nav_ul navbar-nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Iasmani Pinazo <span class="glyphicon glyphicon-user pull-right"></span></a> <ul class="dropdown-status dropdown-menu"> <li class="row"> <form> <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9"> <div class="form-group has-feedback"> <input type="text" name="status" id="Status" class="form-control" placeholder="What's up?" required="required"> <span class="glyphicon glyphicon-remove form-control-feedback"></span> </div> </div> <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"> <a href="#" class="btn-icon-status"> <span class="glyphicon glyphicon-map-marker"></span> </a> </div> <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"> <a href="#" class="btn-icon-status"> <span class="glyphicon glyphicon-picture"></span> </a> </div> <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"> <a href="#" class="btn-icon-status"> <i class="fa fa-link"></i> </a> </div> </form> </li> <li class="row"> <form> <button type="button" style="margin-left: 15px;" class="btn btn-primary"><span class="glyphicon glyphicon-send"></span> Post</button> <button type="button" class="btn btn-primary">+ Social</button> <!-- Split button --> <div class="btn-group pull-right"> <button type="button" class="btn btn-default">Public</button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="glyphicon glyphicon-globe"></span> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu" role="menu"> <form> <li><a href="#">Public <span class="glyphicon glyphicon-globe pull-right"></span></a></li> <li><a href="#">Friends <i class="fa fa-users pull-right"></i></a></li> <li><a href="#">Group <i class="fa fa-book pull-right"></i></a></li> <li><a href="#">Only me <span class="glyphicon glyphicon-lock pull-right"></span></a></li> <li class="divider"></li> <li><a href="#">Other <i class="fa fa-graduation-cap pull-right"></i></a></li> </form> </ul> </div> </form> </li> </ul> </li> </ul>

.popover.bottom .arrow { left:14%; } body { background:#fff; } .nav_ul { left:50%; margin-left:-150px; top:50px; position:absolute; padding: 0px; } .nav_ul>li>a:hover, .nav_ul>li>a:focus, .nav_ul .open>a, .nav_ul .open>a:hover, .nav_ul .open>a:focus { background:#fff; } .dropdown { background:#fff; border:1px solid #ccc; border-radius:4px; width:300px; } .dropdown-status>li>a { color:#428bca; } .dropdown ul.dropdown-status { background: #F0F0F0; box-shadow: none; margin-top: 20px; width: 500px; padding: 20px; } .dropdown ul.dropdown-status:before { content: ""; border-bottom: 10px solid #F0F0F0; border-right: 10px solid transparent; border-left: 10px solid transparent; position: absolute; top: -10px; left: 16px; z-index: 10; } .dropdown ul.dropdown-status:after { content: ""; border-bottom: 12px solid #ccc; border-right: 12px solid transparent; border-left: 12px solid transparent; position: absolute; top: -12px; left: 14px; z-index: 9; } .dropdown-status li input { border-radius: 0; } .dropdown-status li .form-control-feedback{ top:0; color: #CCC; } .btn{ border-radius:0; } .btn-icon-status{ padding: 7px; display: block; }

// popover demo $('button[data-toggle=popover]').popover({ html : true, //trigger: "click", content: function(e) { return $('#popover_content_wrapper').html(); } }); $('button[data-toggle=popover]').on('shown.bs.popover', function () { $('.popover').css('left',parseInt($('.popover').css('left')) + 80 + 'px'); }); $('.dropdown-menu').find('form').click(function (e) { e.stopPropagation(); });