Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  
  
<div class="dropdown">
   <a href="#" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
      Dropdown <span class="caret"></span>
   </a>
   <ul class="dropdown-menu dropdown-menu-300" role="menu">
      <li class="search-me">
         <form id="navbar-search" role="search" action="/discover" method="post">
            <input class="form-control" type="search" name="query" placeholder="Search"/>
            <button type="button" class="btn btn-primary" title="Search">
            <span class="glyphicon glyphicon-search" aria-hidden="true"/>
            </button>
         </form>
      </li>
   </ul>
</div>
  
</body>
</html>
 
.search-me form {
    position: relative;
    padding: 10px 55px 10px 10px;
}
.search-me .btn {
    position: absolute;
    right: 10px;
    top: 10px;
}
.dropdown-menu-300 {
    min-width: 300px
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
carasmopro
0viewers